Как изменить свойство кнопки динамически в 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> 

Мои Т.С.,

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

     }); 
} 

proflem, когда я нажимаю на одной кнопке все свойства кнопки становятся изменены в ожидании может кто-нибудь дает предложение, пожалуйста.

Answer 1

Потому что существует только одна переменная 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> 

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; 
     } 
    }); 
}