ngfor 循环中的按钮禁用/启用答案

【问题标题】：button disable/enable in an ngfor loopngfor 循环中的按钮禁用/启用
【发布时间】：2021-08-07 23:19:25
【问题描述】：

我正在从一个 REST API 获取数据并使用 ng-for 循环访问数据。下图是我使用 ng-for 生成的 UI，我想在按下开始按钮时在开始和停止按钮之间切换，必须禁用它并且应该启用停止，反之亦然值，但它应用于循环内所有生成的组件我希望此逻辑仅应用于特定的唯一 ID。

我的 html

 <div class="flex flex-row justify-center items-center font-semibold bg-gray-100 rounded-xl lg:mx-36 sm:mx-2 p-1 my-3  dark:bg-gray-500 dark:text-white" *ngFor="let items of Fts2Array">
<div class="p-3 py-4 md:text-base sm:text-base font-normal lg:px-3 bg-gray-100 dark:bg-gray-500 dark:text-white">id: {{items.id}}</div>
<div class="p-3 md:text-xl sm:text-base font-semibold lg:px-3 bg-gray-100 dark:bg-gray-500 dark:text-white">
  <h1 class="bg-gray-100 dark:bg-gray-500 dark:text-white">{{items.name}}</h1>
</div>
<div class="lg:px-3  bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button class="uppercase font-normal bg-green-400 hover:bg-green-600 hover:text-white p-1 rounded-lg "  (click)="start( items.id , items.name+' with ID '+items.id+' is started')"  >Start</button>
</div>
<div class="lg:px-3  px-2 bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button class="uppercase font-normal bg-red-400 hover:bg-red-600 hover:text-white p-1 rounded-lg" (click)="stop( items.id ,items.name+' with ID '+items.id+' is stopped')" >Stop</button>
</div>

我的 ts 文件

start(id:any , message){


  console.log(id);
  this.onSuccess(message);
}

stop(id:any , message){

  console.log(id);
  this.onStop(message);

}

 onSuccess(message ) {

     this.service.success('success' ,message, {
      position:['bottom','right'],
      timeOut: 2000,
      animate:'fade',
      showProgressBar:true

    } );
  }


  onStop(message) {
 
    this.service.error('Terminated' ,message, {
      position:['bottom','right'],
      timeOut: 2000,
      animate:'fade',
      showProgressBar:true

    } );
  }

我们非常感谢任何类型的帮助或建议

提前致谢

【问题讨论】：

标签： css angular typescript boolean ngfor

【解决方案1】：

每个行/对象都应该有一个布尔字段 isRunning。将此字段保留在按钮禁用指令中。在开始按钮中：[disabled]="urObj.isRunning" 在停止按钮中：[disabled]="!urObj.isRunning"

在按钮单击事件中，您必须更改状态： (点击)="urObj.isRunning=!urObj.isRunning"

【讨论】：

【解决方案2】：

您可以尝试ngClass，这将帮助您根据案例禁用按钮。在这里，我在 items 对象中添加了两个额外的属性 - enabled 和 disabled，这将有助于区分启用和禁用。

<div class="lg:px-3  bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button [ngClass]="{'enabled':items.enabled,'disabled':items.disabled}" (click)="start( items.id , items.name+' with ID '+items.id+' is started')"  >Start</button>
</div>
<div class="lg:px-3  px-2 bg-gray-100 dark:bg-gray-500 dark:text-black">
  <button [ngClass]="{'enabled':items.enabled,'disabled':items.disabled}"  (click)="stop( items.id ,items.name+' with ID '+items.id+' is stopped')" >Stop</button>
</div>

【讨论】：