Блог

Главная - Вопросы по программированию - как динамически задать класс html или идентификатор с помощью angular

как динамически задать класс html или идентификатор с помощью angular

#html #angular

Вопрос:

 <div class="container">
        <div class="container__usernamesContainer">
            <a class="container__usernamesContainer--text" *ngFor="let user of getUsers()">
                Username: {{ user.getUsername() }}
            </a>
        </div>
        <div class="container__statusesContainer">
            <span class="container__statusesContainer--text" *ngFor="let status of getUsers()">
                <span [ngClass]="'{{ user.getUsername() }}'">
                    Status: {{ status.getStatusLabel() }}
                </span>
            </span>   
        </div>
    </div>

я пытаюсь установить [ngClass]="'{{ user.getUsername() }}'" динамически, и я не получаю значения. как я могу этого достичь?

Комментарии:

1. Попробуйте [ngClass]="{{ user.getUsername }}" обойтись без одинарных кавычек.

Ответ №1:

Здесь происходят две вещи. У вас есть два разных цикла *ngFor, оба из которых повторяют массив, возвращаемый getUsers(). Один из них вы разрешаете пользователям getUser(), а другой вы разрешаете статус getUsers(). Но затем вы пытаетесь вызвать незваного пользователя вместо статуса во втором цикле. Ниже приведен ваш код, каким он должен быть.

 <div class="container">
    <div class="container__usernamesContainer">
        <a class="container__usernamesContainer--text" *ngFor="let user of getUsers()">
            Username: {{ user.getUsername() }}
        </a>
    </div>
    <div class="container__statusesContainer">
        <span class="container__statusesContainer--text" *ngFor="let status of getUsers()">
            <span [ngClass]="status.getUsername()">
                Status: {{ status.getStatusLabel() }}
            </span>

Ответ №2:

Поскольку вы используете привязку свойств, вам не нужно использовать интерполяцию:

 [ngClass]="user.getUsername"

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

Метки: