Как составить каждую строку таблицы html в angular
Я новичок в Ангуляре. Я хочу отображать каждую строку таблицы html как отдельный компонент, используя ngFor. Я попробовал подход, но потерпел неудачу.
Ссылка на StackBlitz — https://stackblitz.com/edit/angular-yaie9e?file=src%2Fapp%2Fapp.component.html
В приведенной выше ссылке stackblitz я визуализирую таблицу, используя один компонент для всей таблицы, и визуализирую другую аналогичную таблицу, используя два компонента. Один для основной таблицы, а другой для данных таблицы. Почему последний не отображается правильно? или, если быть точным, почему он отображается в первом столбце?
Ok. Позвольте мне составить один и вернуться.
@chiril.sarajiu. Пожалуйста, проверьте эту ссылку stackblitz stackblitz.com/edit/… Код с комментариями в app.component.html работает нормально. Однако, если я попытаюсь сделать то же самое, сделав строку таблицы компонентом, я получу проблему (строка таблицы заполняется только под 1-м номером)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я не уверен, почему <tr> не отображается должным образом, когда он является корневым элементом компонента, может быть, кто-то еще может ответить на это. Один из способов, который сработал для меня, — использовать селектор атрибутов вместо селектора элементов.
app.component.html
...
<tbody>
<ng-container *ngFor = "let venue of venues">
<tr app-row [venue] = "venue"></tr>
</ng-container>
</tbody>
...
приложение-row.component.ts
@Component({
selector: '[app-row]',
templateUrl: './row.component.html',
styleUrls: [ './row.component.css' ]
})
export class RowComponent implements OnInit { ... }
приложение-строка.component.html
<td>{{venue.venueName}}</td>
<td>{{venue.userName}}</td>
<td>{{venue.hb}}</td>
В вашем примере структура дома выглядит так:
tbody
tr
app-row
tr
td
td
td
Итак, он отображается правильно, но таблица сломана из-за того, как работает css.
Решением было бы удалить обертку tr из app-row.component.html и изменить свойство селектора app-row.component.ts на selector: 'tr[app-row]', таким образом, вы могли бы использовать его в качестве атрибута для вашего тега тртрong> в app.component.html следующим образом:
<tr app-row *ngFor = "let venue of venues" [venue] = "venue"></tr>
Вот пример стекблиц.
Приведите пример стекблиц с вашей проблемой