如何在有角度的条件下在HTML中给出动态id名称

Question

我需要在HTML中给出id名称。例如，如果我想用css类做到这一点，我会这样做使用[ngClass]。

[ngClass]="{'total': type != 'service-type', 'font-normal':type == 'service-type' }"

如果我想给一个id而不是class，我该怎么做呢。如果我尝试

[id]="{'total': type != 'service-type', 'font-normal':type == 'service-type' }"

我得到id＝"；对象对象"；在HTML中，所以它不工作

Answer 1

您只需在模板中使用一个三元运算符-

例如，

[id]="(type != 'service-type' ? 'total': 'font-normal')"

对于三种情况，您可以将三元运算符-链接起来

[id]="( nameC == 'A' ? 'idA' : (nameC == 'B' ? 'idB' : 'idC' ) )"

但是，如果还有更多的条件，我建议在component.ts文件中构造id，然后在html中使用它。例如

export class MyComponent {
ngOnInit() {
if (condition1) myId = 'A';
if (condition2) myId = 'B';
....
}
}

在component.html中，只需使用id

<p id={{myId}}></p>

Answer 2

你想做这样的事情吗？

[id]="type != 'service-type' ? 'total' : 'font-normal'"