Wie man die Knopfnamen beim Klicken ändert

Question

Ich möchte die Nachricht 'Anfrage gesendet' anzeigen, während der Knopf geklickt wird, aber hier, wenn ich auf einen Knopf klicke, ändern sich alle Knopfnamen. Kann jemand mir helfen vorschlagen.

import { Component,OnInit} from '@angular/core'; 
import {Http, Response, Headers} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 
import {Subject } from 'rxjs/Subject'; 
import {Control,FormBuilder,ControlGroup,Validators} from '@angular/common'; 
import { IDetails } from './pro'; 
import {GetAllList } from './service' 

@Component({ 
    templateUrl: './components/professional/professional.html', 

providers : [GetAllList] 
}) 

export class Professional implements OnInit { 
    id:number; 
    profile_id:number; 
    myText:string="Send Request"; 
    details:IDetails[]; 
    title:string = 'MY SOCIETY'; 
    constructor(private _service:GetAllList) { 

    } 
    ngOnInit(){ 
    this._service.getList() 
      .subscribe(details => this.details = details); 
    } 
    send(index):any{ 
    console.log(index); 
    if(index == index){ 
    this.myText="Request sent"; 
    } 
} 
} 

Meine Vorlage,

<h3 class= "head">MY SOCIETY</h3> 
    <!--<hr>--> 
    <div *ngFor="let detail of details" class = "col-sm-12"> 
    <div class="pic col-sm-1"> 
    <img height="60" width="60" [src]='detail.image'>     
    </div> 
    <div class = "col-sm-6"> 
    <div class = "fname col-sm-12"> 
     {{detail.firstname}} 
    </div> 
    <div class ="phone col-sm-12"> 
    {{detail.phone}} 
    </div> 
    <div class ="phone col-sm-12"> 

    </div> 
    </div> 

    <button (click)='send(detail.profile_id)' > {{ myText }}</button> 

    <hr class= "col-xs-12"></div> 

ich die Meldung ‚Anfrage gesendet‘ angezeigt werden soll, während die Schaltfläche geklickt wird, aber hier, wenn ich auf einen Knopf klicken auf die Schaltfläche Alle Namen sind changing.Can jemand vorschlagen mir helfen.

Answer 1

Dies ist sehr einfach - einfach auf die Schaltfläche Element als Template-Variable übergeben:

<button (click)='send(button, detail.profile_id)' #button>Send Request</button> 

Und in Ihrer Komponente können Sie die Taste Zugriff auf den Text zu setzen und es vielleicht deaktivieren:

send(button, index): void { 
    console.log(index); 

    button.innerHTML = "Request sent"; 
    button.disabled = true; 
} 

---

Plunker zum Beispiel Nutzung