仅禁用 Primeng 中一行的单击按钮 table

Question

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

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>

Answer 1

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

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

我认为你应该：

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

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

仅禁用 Primeng 中一行的单击按钮 table

Disable only the clicked button of a row in Primeng table

html

events

primeng

angular

primeng-table