如何更改單擊按鈕上的按鈕名稱

Question

我想單擊該按鈕時顯示消息「請求已發送」，但在此處當我單擊一個按鈕時，所有按鈕名稱正在更改。可以任何人提示我的幫助。

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

我的模板，

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

我想要顯示的信息「請求發送」按鈕被點擊，而但在這裏，當我在一個按鈕，點擊所有的按鈕名稱changing.Can有人建議我幫助。

Answer 1

這是很容易 - 只需通過按鈕元素作爲模板變量：

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

而在你的組件，您可以訪問按鈕，設置文本，也許禁用它：

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

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

---

Plunker例如用法