Как условие в ngIf может быть истинным только для выбранной строки

Question

Я занимаюсь разработкой углового проекта с использованием Angular версии 7. У меня есть таблица, в которой показаны некоторые объекты 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

Вы можете динамически добавлять условие как «редактируемый» ключ к вашему продукту объекту и проверять условие для того, чтобы сделать его редактируемым, или вы можете проверить уже существующее условие для продукта, и ваш HTML будет

если вы добавили редактируемый ключ в качестве логических значений к вашему объекту, то ваш 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>

Answer 3

Как насчет включения условия отображения таких кнопок как части объекта json? при нажатии edit вы можете изменить флаг конкретного объекта json (строки) и показать все, что вам нужно

Инициализируйте для каждого продукта a product.allowEdit = false. Тогда ваша кнопка Edit вызовет функцию allowEdit(product)(), где вы измените флаг внутри product.allowEdit = !product.allowEdit;