Блог

Я работаю над угловым приложением. У меня есть следующий код в моем html

       <div>{{ data.date | date:'d-MMM-y' || '-' }}</div>
       <div>{{ data.id  || '-' }}</div> 
 

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда для любого поля, такого как дата и идентификатор, значение, поступающее из API, равно нулю, следующий div смещается вверх. Я хочу, чтобы div находился в том конкретном месте, где он находится, когда значение не равно нулю. Итак, я хочу иметь тире «-» всякий раз, когда значение, поступающее из API, равно нулю. Поэтому в своем коде я добавил a || '-' во все поля, но все равно это не работает. Я не получаю «-» в своем html. Как я могу это сделать?

Вы были близки к результату, вам просто не хватает некоторых скобок:

 <div>{{ (data?.date) ? (data.date | date:'d-MMM-y') : '-' }}</div>
 

Рабочий Стекблитц: https://stackblitz.com/edit/angular-vb4peg?file=src/app/app.component.ts

Просто прокомментируйте строку this.data["date"] = new Date(); , и вы увидите, как она изменится.

В этом случае вы можете использовать нулевой оператор объединения

это будет похоже на:

   <div> {{ (data.date | date:'d-MMM-y') ?? '-' }} </div>
  <div> {{ data.id ?? '-' }} </div>