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

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="!product.showEdit" (click)="allowEdit(product)">
        Edit
      </button>&nbsp;
      <button  *ngIf="product.showEdit"(click)="noEdit(product)">
        No Edit
      </button>&nbsp;
    </td>
  </tr>
</tbody>

在你的打字稿中

allowEdit(product) { 
     // in case you want to close all others editing products
     this.products.forEach(product => product.showEdit = false);
     product.showEdit = true;
}

noEdit(product) { 
     product.showEdit = false;
}

您可以在此链接上查看：https://codepen.io/Mocni/pen/PrProv

Answer 2

如果在 json 对象中包含显示此类按钮的条件呢？单击编辑时，您可以修改特定 json 对象（行）的标志并显示您需要的任何内容

为每个产品初始化一个product.allowEdit = false。然后您的Edit 按钮将调用allowEdit(product)() 函数，您可以在其中更改product.allowEdit = !product.allowEdit; 中的标志

Answer 3

您可以将条件作为“可编辑”键动态添加到您的 product 对象并检查条件以使其可编辑，或者您可以检查产品上已经存在的条件 你的 html 将是

如果您将 editable 键作为布尔值添加到您的对象，那么您的 html 可以是

<tbody>
  <tr *ngFor=" let product of products">
    <td>{{product.name}}</td>
    <td>{{datasource.description}}</td>
    <td>
      <button *ngIf="product.editable" (click)="allowEdit(product)">
        Edit
      </button>&nbsp;
      <button *ngIf="product.editable" (click)="noEdit(product)">
        No Edit
      </button>&nbsp;
    </td>
  </tr>
</tbody>

或者，如果您的对象包含按钮应该处于活动状态的所有列表的任何通用值：

<tbody>
<tr *ngFor=" let product of products">
<td>{{product.name}}</td>
<td>{{datasource.description}}</td>
<td>
  <button *ngIf="product.somecondition" (click)="allowEdit(product)">
    Edit
  </button>&nbsp;
  <button *ngIf="product.somecondition" (click)="noEdit(product)">
    No Edit
  </button>&nbsp;
</td>