html - Angular table - 显示隐藏元素 onClick

Question

我在一个有输入字段的表中有一列，我只想在单击按钮时显示输入。单击时我使用 ng-if 显示，但是单击按钮时，所有输入元素都会显示。我只想显示一行的输入。

HTML

    <td *ngIf="!hideStockLevels && row.">
      <div>
        <button class="btn btn-primary" (click)="showInput(row)">Add unit</button>
      </div>
    </td>

    <td *ngIf="!hideStockLevels && !this.isButtonVisible" [hidden]="this.isButtonVisible">
     <input (focusout)="updateUnit(row)" class="inputWidth" [(ngModel)]="unitMap[row.id]" type="text"  value="{{row.Unit}}" [disabled]="dateReceived !== null">
     </td>

Answer 1

每一行都需要有一个唯一的标识符，以便我们知道要显示/隐藏哪一行。您正在使用变量。向每个对象添加另一个( bool 值)属性，您可以在单击时切换它，例如:

<td>
   <button (click)="row.hidden = !row.hidden">Add unit</button>
</td>

<td [hidden]="row.hidden">
  <input .... />
</td>

我不知道当输入应该隐藏时如何切换，但是当你想这样做时，只需将 hidden 属性切换为 false。