Как я могу изменить состояния кнопок в Angular 6?

Question

Я новичок в Angular 6, мой веб-сайт содержит раздел, который отображает набор динамически сформированных кнопок следующим образом

<button class="card-button" *ngFor="let env of product.env" name="button">{{env.name}}</button>

Кроме того, я хочу отобразить другую границу кнопки, которая выбрана по умолчаниюas

button:focus {
      border-bottom: 4px solid #CC292B;
      color: #CC292B;
}
button{
      border-bottom: 4px solid green;
      color: green;
}

Теперь Если кнопка выбрана, она должна получить color: #CC292B; и зеленый цвет в противном случае.Благодаря вышеуказанному CSS я смог достичь поставленной цели.Теперь я хотел, чтобы первая кнопка была выбрана по умолчанию, т.е. первая должна отображаться с color: #CC292B; и иметь зеленый цвет, как я могу этого добиться?Заранее спасибо

Answer 1

Я создал рабочий пример. Пожалуйста, проверьте

https://stackblitz.com/edit/angular-rk93xt

Answer 2

Используйте [ngClass], чтобы добавить класс к кнопке, которая должна получить фокус автоматически после инициализации представления.

<button 
    class="card-button" 
    *ngFor="let env of product.env; let i = index" 
    [ngClass]="[i == 0 ? 'autoFocusMe' : '']" 
    name="button">
    {{env.name}}
</button>

Затем добавьте метод ngAfterViewInit() в ваш файл component.ts, чтобы установитьфокус на эту кнопку

ngAfterViewInit() {
    (<HTMLButtonElement>document.getElementsByClassName("autoFocusMe")[0]).focus();
}

Answer 3

Если вы хотите динамически менять стиль кнопки при нажатии, используйте это:

В вашем компоненте добавьте этот метод:

public isselected=0;
buttonClick(index){
    this.isselected=index;
}

В HTML добавьте следующий код:

   <div *ngFor="let env of carsList; let i =index">
        <button (click)="buttonClick(i)" class="card-button" name="button" [ngClass]="[i == isselected ? 'button-active' : 'button-standard']" >{{env}}</button>
        </div>

Answer 4

Создайте два class для selected и notselected.Примените класс selected, если это первая кнопка, в противном случае notselected

<button class="card-button" *ngFor="let env of product.env; let idx = index" 
[ngClass]="[idx == 0 ? 'selected' : 'notselected']" name="button">{{env.name}}</button>

Или вы можете покрасить кнопку, как показано ниже:

<button class="card-button" *ngFor="let env of product.env; let idx = index" 
[style.color]="{'green' : idx != 0, '#CC292B': idx == 0}" name="button">{{env.name}}</button>

Answer 5

Используйте [style.color] до index=0

[style.color]="{'#CC292B' : i == 0}"

См. Код:

<button class="card-button" *ngFor="let env of product.env;let i=index;" name="button" [style.color]="{'#CC292B' : i == 0}">{{env.name}}</button>

Кстати, вы можете делать только с CSS с :first-child

.card-button:first-child { 
    color: red;
}

//like ngFor
<button class="card-button"  name="button">{{env.name}}</button>
<button class="card-button"  name="button">{{env.name}}</button>
<button class="card-button"  name="button">{{env.name}}</button>

Answer 6

Используйте ngClass для достижения этого:

<button class="card-button" *ngFor="let env of product.env; let i = index" [ngClass]="[i == 0 ? 'button-active' : 'button-standard']" name="button">{{env.name}}</button>

, и вы можете иметь этот вид CSS

.button-active{
color:red;
}

.button-standard{
color: green;
}