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 product.allowEdit = false。然后你的Edit按钮会调用一个allowEdit(product)()函数，你可以在其中更改标志product.allowEdit = !product.allowEdit;