Попробуйте создать собственные Angular компоненты таблицы, но ложную HTML структуру - PullRequest
Новая
       4

Попробуйте создать собственные Angular компоненты таблицы, но ложную HTML структуру

0 голосов
/ 10 января 2020

Я пытаюсь написать свои собственные Angular компоненты таблицы (table-container, table-row и table-item)

Это должно выглядеть так 

<app-table-container>
  <app-table-row>
    <app-table-item></app-table-item>
    <app-table-item></app-table-item>
    <app-table-item></app-table-item>
  </app-table-row>
</app-table-container>

table-container .component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-container',
  templateUrl: './table-container.component.html',
  styleUrls: ['./table-container.component.scss']
})
export class TableContainerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

table-container.component. html

<table border="1">
  <thead>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <ng-content></ng-content>
  </tr>
  </tbody>
</table>

table-row.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-table-row',
  templateUrl: './table-row.component.html',
  styleUrls: ['./table-row.component.scss']
})
export class TableRowComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

таблица-строка .component. html

<tr>
  <td>Cell 1.1</td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
</tr>
<tr>
  <td>Cell 2.1</td>
  <td>Cell 2.2</td>
  <td>Cell 2.3</td>
</tr>

и app.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  title = 'testing-project';
  public tableListObjects: any[] = [
    {
      name: {
        forename: 'Jens',
        surname: 'Vial'
      },
      age: 32,
      job: 'Software Engineer',
      vacation: false
    },
    {
      name: {
        forename: 'Hans',
        surname: 'Peter'
      },
      age: 22,
      job: 'Electrican',
      vacation: true
    }];

  ngOnInit(): void {
  }
}

и app.component. html

<app-table-container>
  <app-table-row></app-table-row>
</app-table-container>

для теперь без компонента app-table-item, потому что проблема в компоненте app-table-row-component. Проблема в том, что структура таблицы ложна. Я ожидаю, что таблица с 3 столбцами заголовка 1 - 3 и две строки с ячейками 1.1 - 1.3 и 2.1 - 2.3 Вместо ячеек 1.1 - 1.3 и 2.1 - 2.3 находятся в первом столбце от заголовка 1, см. Изображение.

enter image description here

Я понятия не имею, почему это происходит. Может кто-нибудь сказать мне, в какой момент я совершаю ошибку?

DOM выглядит так

enter image description here

1 Ответ

1 голос
/ 10 января 2020

Я не знаю, ищете ли вы, но если вы не хотите создавать дополнительные теги, вы можете использовать способ 

<tr app-table-row></tr>

В stackblitz есть пример, но приложение становится как 

<app-table-container>
  <tr app-table-row>
    <td app-table-cell>cell 1</td>
    <td app-table-cell>cell 1</td>
    <td app-table-cell>cell 1</td>
  </tr>
</app-table-container>

шаблоны app-table-row и app-table-cell просты 

<ng-content></ng-content>
...