angular - 如何在Angular2中动态更改按钮属性

Question

模板，

<div *ngFor="let detail of details"  class = "col-sm-12 nopadding">
  <a  class="button buttonaquacss button-mini button-aqua  
      text-right pull-right" [ngClass]="{activec: color}" 
      (click)='sendrequest(button,detail._id)' 
      #button [ngStyle]="{'background-color':  color}">{{buttonname}}
  </a>   
</div>

我的ts，

buttonname = 'connect';
sendrequest(button, index): void {
    this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
        .subscribe(
        response => {
            if (response.json().status == 'success') {

                buttonname = 'pending';
                this.color = true;
            }

        });
}

问题是，当我单击一个按钮时，所有按钮属性都会更改为待处理，任何人都可以提出建议。

Answer 1

因为只有一个 buttonname 变量，并且所有按钮都绑定(bind)到同一个变量。您需要将它们绑定(bind)到不同的变量。要么为每个按钮使用不同的变量名称，要么使用值数组。

<a (click)='send(button,detail._id)' #button>{{buttonname[detail._id]}}</a> 

buttonname = {'id1': 'connect', 'id2': 'connect'};

sendrequest(button, index): void {
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            buttonname[index] = 'pending';
            this.color = true;
        }
    });
}

更新

<a (click)='send(button,detail._id)' #button>{{pendingId == detail._id ? 'pending' : 'success'}}</a> 

pendingId;

sendrequest(button, index): void {
  this.pendingId = index;
  this.http.post('http://localhost:3000/sendrequest', formdata, { headers: headers })
    .subscribe(
    response => {
        if (response.json().status == 'success') {
            pendingId = null;
            this.color = true;
        }
    });
}