В Angular директива ngIf позволяет условно отображать или скрывать элементы на основе заданного выражения. Имея дело с пустыми или нулевыми условиями, важно правильно их обрабатывать, чтобы обеспечить бесперебойную работу и удобство взаимодействия с пользователем. В этой статье блога мы рассмотрим несколько методов обработки пустых или нулевых условий в директиве ngIf Angular, а также разговорные объяснения и соответствующие примеры кода.

Метод 1. Использование оператора безопасной навигации (?.):
Оператор безопасной навигации, представленный знаком «?». в Angular позволяет безопасно получать доступ к свойствам объекта, не выдавая ошибку, если объект имеет значение NULL или не определен. Вы можете использовать этот оператор, чтобы проверить, существует ли свойство, прежде чем оценивать его в условии ngIf. Вот пример:

<div *ngIf="user?.name">Welcome, {{ user.name }}!</div>

Метод 2: использование оператора Элвиса (?.):
Оператор Элвиса, также представленный знаком «?». в Angular похож на оператор безопасной навигации, но может обрабатывать доступ как к свойствам, так и к методам. Он обеспечивает краткий способ обработки нулевых или неопределенных условий. Вот пример:

<div *ngIf="user?.getName()">Welcome, {{ user?.getName() }}!</div>

Метод 3: использование необязательного оператора связывания (?.[]):
Необязательный оператор связывания «?». также может использоваться с массивами в Angular для обработки нулевых или неопределенных условий. Это позволяет вам получать доступ к элементам массива, не вызывая ошибки, если массив пуст или равен нулю. Вот пример:

<div *ngIf="users?.length > 0">Found {{ users?.length }} users!</div>

Метод 4: оценка со значением по умолчанию:
Вы можете присвоить переменной значение по умолчанию и использовать его в условии ngIf. Если переменная пуста или равна нулю, вместо нее будет использоваться значение по умолчанию. Этот подход полезен, когда вам нужно отобразить резервный контент. Вот пример:

<div *ngIf="user || userDefault">Welcome, {{ user || userDefault }}!</div>

Метод 5: использование директивы ng-template:
Директива ng-template позволяет вам определить блок шаблона, который можно условно отобразить с помощью ngIf. Этот подход особенно удобен, когда вы хотите отображать различное содержимое в зависимости от условия. Вот пример:

<ng-container *ngIf="users; else noUsers">
  <div *ngFor="let user of users">{{ user.name }}</div>
</ng-container>
<ng-template #noUsers>No users found.</ng-template>