Angular2 [innerHTML] if else validation

Question

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

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

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

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

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

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

Любое решение?

Answer 1

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

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

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

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

Answer 2

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

Как это

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

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