Question

我是Angular 6的新手，我的网站上包含一个部分，其中显示一组动态形成的按钮，如下所示

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

此外，我想显示默认情况下选择为

的按钮的不同边框

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

现在，如果选择了该按钮，它将显示color: #CC292B;，否则显示绿色。通过上面的CSS，我能够完成任务。现在，我希望默认选择第一个按钮，即第一个按钮应显示为color: #CC292B;，其余部分显示为绿色，如何实现呢？预先感谢

Answer 1

使用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;
}

Answer 2

使用[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>

顺便说一句，您只能使用:first-child

来处理CSS

.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 3

分别为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 4

如果要在用户单击时动态更改按钮样式，请使用以下方法：

在您的组件中添加以下方法：

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 5

使用[ngClass]向按钮添加一个类，该类应在初始化视图后自动获得焦点。

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

然后在您的component.ts文件中添加方法ngAfterViewInit()，将焦点设置为该按钮

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

Answer 6

我已经创建了工作示例。请检查

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

如何在Angular 6中更改按钮状态？

6 个答案: