Как я могу указать динамическое имя c id в HTML при условии в angular?

Question

Мне нужно указать имя идентификатора в HTML при условии. Например, если я хочу сделать это с классом css, я сделаю это с помощью [ngClass].

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

Как я могу сделать это, если я хочу указать идентификатор вместо класса. Если я попробую

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

, я получаю id = "Object Object" в HTML, поэтому он не работает

Answer 1

Вы можете просто использовать тернарный оператор в шаблоне -

Например,

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

Для трех условий вы можете связать тернарные операторы -

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

Но если есть еще много условий, я бы рекомендовал создать идентификатор в файле component.ts, а затем использовать его в html. Например -

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

А в компоненте. html просто используйте id

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

Answer 2

вы хотите сделать что-то подобное?

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