我正在从 Rest API 获取数据并使用 ng-for 循环访问数据。下图是我使用 ng-for 生成的 UI 我想在按下开始按钮时在开始和停止按钮之间切换,必须禁用它并应启用停止,反之亦然我尝试使用 [disabled 执行此操作]
和 boolean 值,但它应用于循环内所有生成的组件,我希望此逻辑仅应用于特定的唯一 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
} );
}
非常感谢任何类型的帮助或建议
提前致谢
最佳答案
每个行/对象都应该有一个 boolean 字段 isRunning。将此字段保留在按钮禁用指令中。 在开始按钮中:[disabled]="urObj.isRunning" 在停止按钮中:[disabled]="!urObj.isRunning"
在按钮单击事件上,您必须更改状态: (点击)="urObj.isRunning=!urObj.isRunning"
关于css - 在 ngfor 循环中禁用/启用按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67590972/