Angular2 [innerHTML] if else validation

Question

我希望在按钮中显示不同的文本，具体取决于某些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]，因此无效。

任何解决方案？

Answer 1

使用三元表达式

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

无论如何，你不需要innerHtml。我这样做：

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

Answer 2

更灵活的方式是将变量绑定为按钮文本。

喜欢这个

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

并在.ts文件中，根据您的json值设置buttonText的值。