Отображение скрытого элемента Div по определенному индексу с использованием таблицы материалов Angular
У меня есть мат-стол, который имеет следующие функции: -
(1) Добавить/удалить строки
(2) Добавьте данные в строку, используя различные элементы управления (поле со списком, текстовое поле и т. д.).
Один из элементов управления (дополнительная информация) представляет собой текстовое поле, которое при появлении символа ? отображается скрытый элемент «div», который в конечном итоге будет использоваться для хранения списка данных.
У меня проблема в том, что если я добавлю, скажем, 3 строки и введу? в 3-ю строку скрытый «div» отображается во всех 3-х строках.
Мне нужен способ каким-то образом индексировать каждую строку, добавленную в таблицу, и отображать только элемент «div» этой строки.
К сожалению, мои знания HTML ограничены, и я также новичок в Angular.
Я создал решение StackBlitz, демонстрирующее мою проблему. демо
Ответы 2
ВОТ РАБОТАЮЩИЙ 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>
ТС:
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;
}
Вы также должны обратить внимание на удаление строк, сделайте сращивание, вы поняли.
Правильный способ решить вашу проблему - использовать локальное состояние строки, поэтому поместите свой атрибут в коллекцию столбцов (новый столбец скрыт). Таким образом, у вас будет возможность управлять expanded свойством конкретной строки. Вот ваш обновлен стекблиц.