【问题标题】:How to change the properties of a button如何更改按钮的属性
【发布时间】:2016-07-27 09:00:17
【问题描述】:

我有一个按钮

我的模板,

  <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">
  <a><div class = "fname col-sm-12">
    {{detail.firstname}}
 </div></a>
  <div class ="phone col-sm-12">
    {{detail.address}}
 </div>
 </div>
   <button  (click)='send(button,detail.profile_id)' #button>{{req}}</button>
   <hr class= "col-xs-12"></div>

我想根据一定的条件改变按钮的属性,如下

ngOnInit(){

this._service.getList()
.subscribe(
      response => {
         this.details = response;
          this.details.forEach((name,index)=>{
          if(this.details[index].approved == null){
            button.innerHTML = "Add frnd";
            button.disabled = true; 
          }
          if(this.details[index].approved == 1){
             button.disabled = true;

         }
          if(this.details[index].status == 1){
              button.innerHTML = "Pending";
          }

          });
      }
  }

我不能在这里使用该功能,因为它是为其他财产保留的,任何人都可以建议我对此提供帮助............

【问题讨论】:

  • 好的。你在模板中使用ngFor吗?
  • 等等,你处理的只有一个按钮吗?

标签: javascript angularjs angular


【解决方案1】:
<button  (click)='send(button,detail.profile_id)' [disabled]="isDisabled">{{req}} {{innerHTML}}</button>

在组件中,

{
 isDisabled:boolean:false;
 innerHTML:string='';

this._service.getList().subscribe((response) => {
      this.details = response;
      this.details.forEach((detail)=>{   //<----you are iterating through each object of this.details list.

      if(detail.approved == null){       //<----please note that I changed each if condition with respect to forEach

        //button.innerHTML = "Add frnd";
        //button.disabled = true; 

        this.innerHTML="Add frnd";
        this.isDisabled=true;
      }
      if(detail.approved == 1){
         //button.disabled = true;

          this.isDisabled=true;

     }
      if(detail.status == 1){
          //button.innerHTML = "Pending";

          this.innerHTML="pending";
      }

      });
  }

}

【讨论】:

  • 非常感谢 micronyks'
猜你喜欢
  • 1970-01-01
  • 2011-02-09
  • 2017-06-13
  • 1970-01-01
  • 1970-01-01
  • 2014-12-31
  • 2013-08-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多