Question

我有一个具有以下功能的垫桌：-

（1）添加/删除行

（2）使用各种控件（组合框，文本框等）将数据添加到一行中。

其中一个控件（附加信息）是一个文本框，当输入后会显示一个隐藏的“ div”元素，该元素最终将用于保存数据列表。

我的问题是，如果我添加说3行并输入?？进入第三行，所有三行均显示隐藏的“ div”。

我需要一种方法以某种方式索引添加到表中的每一行，并仅显示该行的'div'元素。

不幸的是，我对HTML的了解有限，我对Angular也很陌生。

我创建了一个StackBlitz解决方案来演示我的问题。 demo

Answer 1

HERE'S A WORKING STACKBLITZ
我创建了一个数组expandedCols : boolean[] = [];，用于跟踪div的状态（是否已扩展），当您添加一行时，当您放置？时，还向该数组添加一个默认值为false的数组。我只是将索引i的值更改为true。

<ng-container matColumnDef="additionalCode" class="parent" >
      <th mat-header-cell *matHeaderCellDef>Additional Code</th>
      <td mat-cell *matCellDef="let element; let i = index" class="parent" >
        <mat-form-field class="type">
          <input matInput (keyup)="toggleLookup($event, i)" autocomplete="off" (keydown.ArrowDown)="onDown()" placeholder="Enter ?">
        </mat-form-field>
        <div *ngIf="expandedCols[i] == true" class="child">Yah it expanded
          <button (click)="expanded = false">Close</button>
        </div>
      </td>
</ng-container>

TS：

addRow() {
    this.doAddRow();
    this.expanded = false;
    this.expandedCols.push(false);
  }

toggleLookup(event: any, i): void {
    if (event.target.value !== '?') {
      return;
    }
    event.target.value = '';
    this.expanded = true;
    this.expandedCols[i] = true;
  }

您还应该注意删除行，进行拼接，您就会明白。

Answer 2

解决问题的正确方法是使用行本地状态-将属性放在列集合中（新列被隐藏）。这样，您将有机会管理特定行的expanded属性。这是您的updated stackblitz.

使用Angular Material表在特定索引处显示隐藏的Div元素

2 个答案: