Css ngfor循环中的按钮禁用/启用

Css ngfor循环中的按钮禁用/启用,css,angular,typescript,boolean,ngfor,Css,Angular,Typescript,Boolean,Ngfor,我正在从RESTAPI获取数据,并使用ng for循环遍历数据。下图是我使用ng生成的UI,因为我想在按下启动按钮时在启动和停止按钮之间切换,必须禁用启动和停止,反之亦然,我尝试使用[disabled]和布尔值,但它应用于循环中生成的所有组件。我希望此逻辑仅应用于特定的唯一id 我的html <div class="flex flex-row justify-center items-center font-semibold bg-gray-100 rounded-xl lg:

我正在从RESTAPI获取数据,并使用
ng for
循环遍历数据。下图是我使用ng生成的UI,因为我想在按下启动按钮时在启动和停止按钮之间切换,必须禁用启动和停止,反之亦然,我尝试使用
[disabled]
和布尔值,但它应用于循环中生成的所有组件。我希望此逻辑仅应用于特定的唯一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>

任何形式的帮助或建议都会受到极大的欢迎


提前感谢

每一行/对象都应该有一个正在运行的布尔字段。将此字段保留在按钮禁用指令中。 在开始按钮中:[已禁用]=“urObj.isRunning” 在停止按钮中:[已禁用]=“!urObj.isRunning”

单击按钮事件时,您必须更改状态:
(单击)=“urObj.isRunning=!urObj.isRunning”

您可以尝试
ngClass
,这将帮助您根据具体情况禁用按钮。 在这里,我在
项目
对象中添加了两个额外属性-
启用
禁用
,这将有助于区分启用和禁用

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

 

开始
停止
<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>