javascript - Hur kan ett villkor i ngIf vara sant endast för den valda raden

Jag utvecklar ett Angular-projekt med Angular version 7. Jag har en tabell som visar några JSON-objekt. I varje JSON-objekt har jag lagt till 2 knappar, som jag visar villkorligt när varje en är vald.

Vad jag menar är att när jag klickar på knappen Redigera vill jag att knappen Ingen redigering ska visas och vice versa ENDAST FÖR DEN RAD JAG TRYCKTE PÅ KNAPPEN. Men vad som händer är att när jag klickar på knappen Redigera för en specifik rad, ändras alla andra knappar för de andra raderna.

Hur kan jag göra detta?

myapp.component.html fil:

<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 fil:

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

Svar #1

myapp.component.html-fil:

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

och i din TypeScript

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

Du kan kolla det på den här länken: https://codepen.io/Mocni/pen/PrProv

Svar #2

Vad sägs om att inkludera villkoret för att visa sådana knappar som en del av json-objektet? När du klickar på redigera kan du då ändra flaggan för det specifika json-objektet (raden) och visa vad du behöver

Initiera för varje produkt en product.allowEdit=false. Sedan skulle din Edit-knapp kalla en allowEdit(product)()-funktion där du skulle ändra flaggan inuti product.allowEdit=!product.allowEdit;