Условная привязка свойств шаблона в Angluar

Question

Можно ли условно связать свойство в шаблоне Angular

Например, я получил Observable с некоторыми данными

<my-component *ngIf="input$ | async as input"
              [input1]="input.input1"
              [overrideValue]="input.overrideValue"> <--For this value, only bind when value is not null
</my-component>

Answer 1

Вариант 1

Вы можете попробовать использовать оператор безопасной навигации ?. . Он проверяет, определено ли свойство перед доступом к нему.

<my-component *ngIf="input$ | async as input"
              [input1]="input.input1"
              [overrideValue]="input?.overrideValue"> <--For this value, only bind when value is not null
</my-component>

Вариант 2

Вы также можете попробовать использовать тернарный оператор.

<my-component *ngIf="input$ | async as input"
              [input1]="input.input1"
              [overrideValue]="input.overrideValue ? input.overrideValue : ''"> <--For this value, only bind when value is not null
</my-component>

Однако будет привязана пустая строка '', если свойство overrideValue не определено.