Question

我想显示消息＆＃39;请求已发送＆＃39;点击按钮，但是当我点击一个按钮时，所有按钮名称都在变化。任何人都可以建议我帮忙。

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>

我想显示消息＆＃39;请求已发送＆＃39;点击按钮，但是当我点击一个按钮时，所有按钮名称都在变化。任何人都可以建议我帮忙。

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

如何更改点击

1 个答案: