Блог

Главная - Вопросы по программированию - Как получить доступ к свойству объекта в angular с помощью строковой интерполяции?

Как получить доступ к свойству объекта в angular с помощью строковой интерполяции?

#javascript #angular #string #typescript

Вопрос:

У меня есть этот объект в файле ts компонента, который выглядит следующим образом:

  someData = {
      someValue: null,
      unit: "centimeters"
    },

В моем шаблоне (html-файл) Я должен проверить значение свойства «someValue«. Если его значение равно нулю, то отобразите единицу измерения, в противном случае отобразите значение someValue и единицу измерения вместе. У меня есть приведенный ниже код, но он, похоже, не работает. Может ли кто-нибудь указать мне правильное направление? Заранее спасибо!

 <div>{{ someData?.someValue === null ? someData?.someValue.unit : someData?.someValue someData?.unit }}</div >

Ответ №1:

Вы можете использовать ngif для проверки состояния и отображения данных:

 <div *ngIf="someData?.someValue === null">{{someData.unit}}</div>
<div *ngIf="someData?.someValue!= null">{{someData.someValue}} {{someData.unit}}</div>

Ответ №2:

Ваши два значения в конце не будут отображаться правильно, потому что это исполняемый javascript, а не HTML, когда он заключен в двойные скобки.

Я бы предложил разделить это на две строки HTML.

 <div *ngIf="someData?.someValue; else unit_only">{{someData.someValue}} {{someData.unit}}</div>
<ng-template #unit_only>{{someData?.unit}}</ng-template>

Или вы могли бы попробовать придерживаться своего оригинального подхода…

 <div>{{ someData?.someValue === null ? someData?.unit : someData?.someValue   ' '   someData?.unit }}</div>
Метки: