Прикрепите дополнительные данные к угловому компоненту
У меня есть несколько компонентов MatTable, которые генерируются динамически (с помощью * ngFor):
<div *ngFor = "....">
<table mat-table [attr.data-table-id] = "someId" >
....
</table>
.....
</div>
теперь в файле класса компонента я хочу найти конкретную ссылку на MatTable. Я определил свойство в классе компонента:
@ViewChildren(MatTable) tables: QueryList<MatTable>;
теперь у меня есть ссылка на все MatTables. но я хочу найти конкретный MatTable, например MatTable с определенным атрибутом (например, data-table-id = 12). как я могу получить доступ к соответствующему DomElement каждого MatTable? если я могу получить ссылку на соответствующий DomElement компонента, я могу прочитать атрибуты этого элемента и найти желаемый компонент (MatTable).
Ответы 2
Вы можете использовать базовый тег HTML id и получить к нему доступ следующим образом:
<table mat-table id = "myId" [attr.data-table-id] = "someId" >
....
</table>
В компоненте:
@ViewChildren(MatTable, {read: ElementRef}) public tables: QueryList<ElementRef>;
let theTableIWant: ElementRef = this.tables.find((el: ElementRef) => el.nativeElement.id === myId);
Вы можете написать @ViewChildren(MatTable, {read: ElementRef}) public tables: QueryList<ElementRef> для ссылки на dom, связанный с вашим MatTable
спасибо, но, найдя желаемый ElementRef, как я могу найти соответствующий MatTable? Моя основная проблема - найти конкретный MatTable по его атрибутам DOM. в моем шаблоне я хотел разделить каждый MatTable, я установил атрибут data-table-id тега <table>. есть ли какое-либо решение, с помощью которого я могу отличить свои таблицы MatTables в шаблоне и найти один из них позже (по критерию) в файле класса компонентов?
Используйте метод filter объекта QueryList:
let table = tables.filter(elRef => elRef.nativeElement.dataset.tableId === 12)[0];
if (table !== undefined) {
// your logic
}
У меня есть несколько таблиц, и в моем классе компонентов у меня есть коллекция, которая ссылается на эти таблицы: @ViewChildren (MatTable) таблицы: QueryList <MatTable>; я хочу найти конкретный MatTable в списке «tabels». Я установил атрибуты таблицы, чтобы найти их позже. но у меня есть ссылка на компонент MatTable, а не на DomElement.