仅禁用Primeng表中某行的单击按钮

问题描述

我的primeng 表的每一行都有一个按钮，只要我点击该按钮应该禁用的任何按钮。但是在我的代码中，所有按钮都在单击一个按钮时被禁用。请指导我如何仅禁用单击的按钮（我不希望按钮切换，禁用的按钮显示仅在页面刷新时启用）。到目前为止，我已经尝试过以下代码。

import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',templateUrl: './app.component.html'
})
export class AppComponent {
  didAction: boolean = false;
  private action() {
    this.didAction = true; //what to do here to disable only the clicked button in the row
  }
}

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Action</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
              <p-button (click)="action()" class="pointer" label="Click" [disabled]="didAction()"></p-button>
            </td>
        </tr>
    </ng-template>
</p-table>

解决方法

你把所有的代码都贴在这里了吗？如果你这样做，我认为我们可以更好地帮助你。

问题是您在此示例中使用全局变量禁用一辆或多辆特定汽车。

我认为你应该：

• 获取行的索引并将其传递给禁用汽车的函数。
• 添加禁用属性以禁用特定。

---

HTML 文件：

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Action</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car let-i="rowIndex">
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>
              <p-button (click)="action(i)" class="pointer" label="Click" [disabled]="car.disabled"></p-button>
            </td>
        </tr>
    </ng-template>
</p-table>

打字稿文件：

import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',templateUrl: './app.component.html'
})
export class AppComponent {
  cars: car[] = [];
  private action(index: number) {
    cars[index].disabled = true;
  }
}