Потому что ingredients — это Observable (или Promise), и не факт, что в момент выполнения в нем будет значение. Если вы уверены, что значение там есть, нужно поставить ! (non null assertion operator) или сделать проверку на null, например, в блоке с *ngIf выше.
в ts файле стоит ! но ошибку выдает
Ну, стоит-то около самой Observable. Она, понятное дело, не будет null, а вот значение в ней — может быть. Нужно ставить после async: (ingredients | async)!.ingredients
а вообще как правильно обрабатывать такие моменты?
Делать проверку на null в *ngIf блока выше, если возможно такое, что значения нет. Например, так.
обязательно использовать ng-container?
Не обязательно. Любой блок выше, который не будет отображаться, если в переменной нет значения.
не хавает ingredients в ngFor
В вашем случае в *ngIf нужно поставить "(ingredients$ | async)?.ingredients let ingredients" Пример я просто схожий писал.
Обсуждают сегодня