Как добавить компонент строки в таблицу в Angular 7?
Я использую последнюю версию angular. (7.2.0) У меня есть личный компонент tr, например:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-table-row',
templateUrl: './table-row.component.html',
styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {
@Input() character: any;
@Input() columns: string[];
constructor() { }
ngOnInit() {
}
}
Я хочу использовать этот компонент внутри таблицы, например:
<table class = "mat-elevation-z8">
<tr>
<th *ngFor = "let c of columns">{{c}}</th>
</tr>
<tr app-table-row class = "component-style table-row-component" *ngFor = "let ch of characters | async"
[character] = "ch"
[columns] = "columns">
</tr>
</table>
получить ошибки типа:
Can't bind to 'character' since it isn't a known property of 'tr'. ("table-row class = "component-style table-row-component" *ngFor = "let ch of characters | async"
[ERROR ->][character] = "ch"
[columns] = "columns">
</tr>
"): ng:///AppModule/TableComponent.html@7:7
Как правильно добавить мой компонент в таблицу?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Определите селектор компонентов как селектор атрибутов с квадратными скобками:
@Component({
selector: 'tr[app-table-row]',
...
})
чтобы его можно было установить как атрибут элемента tr:
<tr app-table-row ...>
Как сказано в руководстве по стилю: «Есть несколько случаев, когда компоненту присваивается атрибут, например, когда вы хотите дополнить встроенный элемент». Это именно ваш случай: вы увеличиваете элемент tr (вместо добавления пользовательского элемента в DOM).
@ConnorsFan: сэр, не могли бы вы сказать мне, как использовать с td?
Как упоминалось в @ConnorsFan, вам нужно определить свой компонент как атрибут, добавив квадратные скобки в селектор вашего компонента, но нет необходимости добавлять перед ним «tr», поэтому следующее должно быть хорошо:
@Component({
selector: '[app-table-row]',
...
})
Затем используйте его следующим образом:
<tr app-table-row
*ngFor = "let item of items"
[myProp] = "item"
(myEvent) = "executeEvent($event)"
...>
</tr>
Добавление tr перед квадратными скобками ограничивает использование компонента tr элементами. Вероятно, это то, что нам нужно, если компонент содержит элементы td и th.
Спасибо. Работает, но согласно angular.io/guide/styleguide#style-05-03. это неправильный стиль для eslint