Ошибка, если не проверить, существует ли {{object.field}}

У меня есть вопрос о проверке, если какое-либо поле в объекте существует.

Я хочу напечатать все категории, которые есть у пользователя, поэтому я делаю что-то вроде этого:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li>
      {{category.name}}
    </li>
  </ul>

Причина? Все данные напечатаны правильно, но я получаю сообщение об ошибке в веб-консоли, например:

Cannot read property 'name' of null

Но когда я делаю что-то вроде:

  <ul *ngIf="user.categories.length >  0" *ngFor="#category of user.categories">
    <li *ngIf="category">
      {{category.name}}
    </li>
  </ul>

Тогда все в порядке.

Я делаю что-то не так или мне нужно каждый раз проверять это? У вас когда-нибудь была такая проблема?

Ответ 1

базовое использование

Используйте оператор безопасной навигации

{{category?.name}}

то name читается только тогда, когда category не null.

массив

Это работает только для оператора . (разыменования). Для массива вы можете использовать

{{records && records[0]}}

См. также Angular 2 - Невозможно прочитать свойство '0' ошибки undefined с контекстом. ОШИБКА КОНТРОЛЯ: [object Object]

асинхронная трубка

С трубкой async он может использоваться как

{{(chapters | async)?.length

ngModel

С ngModel в настоящее время его нужно разбить на

[ngModel]="details?.firstname" (ngModelChange)="details.firstname = $event"

См. также Данные не добавляются к шаблону в angular2

*ngIf

Альтернативой всегда является обертка части представления с помощью *ngIf="data", чтобы предотвратить визуализацию части, прежде чем data будет доступен для предотвращения ошибки разыменования.