ngIf 中的条件如何仅对所选行为真

Question

我正在使用 Angular 版本 7 开发一个 angular 项目。我有一个显示一些 json 对象的表。在每个 json 对象中，我添加了 2 个按钮，当每个按钮被选中时，我都会有条件地显示这些按钮。

我的意思是，当我单击“编辑”按钮时，我希望仅在我按下按钮的那一行显示“无编辑”按钮，反之亦然。但是发生的情况是，当我单击特定行的“编辑”按钮时，其他行的所有其他按钮都会更改。

我怎样才能做到这一点？

myapp.component.html文件：

<table>

    <thead>

      <tr>

        <th scope="col" translate>Name</th>

        <th scope="col" translate>Description</th>

      </tr>

    </thead>

    <tbody>

      <tr *ngFor=" let product of products">

        <td>{{product.name}}</td>

        <td>{{datasource.description}}</td>

        <td>

          <button *ngIf="allowEdit" (click)="edit(product)">

            Edit

          </button>&nbsp;

          <button *ngIf="allowNoEdit" (click)="noEdit(product)">

            No Edit

          </button>&nbsp;

        </td>

      </tr>

    </tbody>

  </table>

myapp.component.ts文件：

allowEdit: boolean = true;

allowNoEdit: boolean = false;

edit(product) {

   this.allowEdit= !this.allowEdit;

   this.allowNoEdit= !this.allowNoEdit;

}

noEdit(product) {

   this.allowEdit= !this.allowEdit;

   this.allowNoEdit= !this.allowNoEdit;

}

Answer 1

包含将此类按钮显示为 json 对象的一部分的条件怎么样？单击编辑时，您可以修改特定 json 对象（行）的标志并显示您需要的任何内容为每个产品初始化 a&nbsp;product.allowEdit = false。然后你的Edit按钮会调用一个allowEdit(product)()函数，你可以在其中更改标志product.allowEdit = !product.allowEdit;