如何更改单击按钮上的按钮名称

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例如用法