Блог

Я хочу отображать другой текст в кнопке, в зависимости от некоторых данных JSON.

Пример (конечно, не работает):

 <button [innerHTML]='"Male" if user.gender==1 else "Female"'></button>
  

Я знаю, что эта функциональность уже существует, например, в [ngClass]:

 <button [ngClass]='{"btn-success": data.complete, "btn-primary": !data.complete}'>Some text</button>
  

Использование подхода [ngClass] отображается как [object:Object] и, следовательно, не работает.

Есть решение?

использовать троичное выражение

 <button [innerHTML]='user.gender == 1 ? "Male" : "Female"'></button>
  

в любом случае вам это не нужно innerHtml . Я бы сделал это так:

 <button>{{ user.gender == 1 ? "Male" : "Female" }}</button>
  

Более гибкий способ — просто привязать переменную к тексту кнопки.

Вот так

<button>{{buttonText}}</button>

и в вашем .ts файле просто установите значение buttonText на основе вашего значения json.