Отображение скрытого элемента Div по определенному индексу с использованием таблицы Angular Material

Question

У меня есть таблица соответствия, которая имеет следующие функциональные возможности: -

(1) Добавить / удалить строки

(2) Добавить данные в строку с помощью различных элементов управления (комбинированный список), текстовое поле и т. д.).

Одним из элементов управления (дополнительная информация) является текстовое поле, которое, когда?введено отображает скрытый элемент 'div', который в конечном итоге будет использоваться для хранения списка данных.

У меня проблема в том, что, если я добавлю, скажем, 3 строки и введу?в 3-й строке скрытый «div» отображается на всех 3 рядах.

Мне нужен способ как-то индексировать каждую строку, добавленную в таблицу, и отображать только элемент 'div' этой строки.

К сожалению, мои знания HTML ограничены, и я довольно плохо знаком с Angular.

Я создал решение StackBlitz, демонстрирующее мою проблему. демо

Answer 1

ЗДЕСЬ РАБОЧИЙ 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 свойством определенной строки.Вот ваш обновленный стек-блиц.