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>

我的，

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

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

buttonname

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

如何在angular2中动态更改按钮属性

1 个答案: