Данные таблицы не совпадают с заголовками таблицы при вводе данных таблицы в новый компонент

Question

Итак, я пытаюсь создать базовую таблицу.У меня есть заголовки таблиц на одном компоненте, а затем данные таблицы на другом компоненте.Я передаю данные от одного компонента другому через цикл ngFor следующим образом:

<table>
  <thead>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  </thead>
<tbody  *ngFor="let tenancy of (tenancy$ | async)">
  <tenancy-card [tenancy]="tenancy" ></tenancy-card>
</tbody>
</table>

И затем в компоненте карты-арендатора у меня есть следующее:

<tr *ngFor="let tenants of tenancy.tenants">
  <td>{{tenants.first_name}}</td>
  <td>email</td>
</tr>

проблема в том, что тогда отображаются данные, не встроенные, как показано на рисунке ниже:

Кто-нибудь имел эту проблему раньше?

Answer 1

Попробуйте:

В пределах tenancy-card component у нас должно быть что-то вроде этого:

import { Component, Input } from "@angular/core";

@Component({
  selector: "tr[app-tenancy-card]",
  template: `
      <td>{{tenancy.first_name}}</td>
      <td>email</td>
  `
})
export class TenancyCardComponent {
  @Input() tenancy;
}

Затем предположим, что у нас есть tenancy-table component, мы могли бы написать так:

import { Component } from "@angular/core";

@Component({
  selector: "app-tenancy-table",
  template: `
    <table>
      <thead>
       <tr>
        <th>Name</th>
        <th>Email</th>
       </tr>
      </thead>
      <tbody>
        <tr *ngFor="let t of tenancyyy" app-tenancy-card [tenancy]="t"></tr>
      </tbody>
    </table>
  `
})
export class TenancyTableComponent {
  tenancyyy = [
    { first_name: "Krise" },
    { first_name: "James" },
    { first_name: "Krise" }
  ];
}

Однако приведенные ниже примеры данных могут отличаться от ваших.Надеюсь, вы сможете решить вашу проблему.

Это рабочий проект на CodeSandbox: https://codesandbox.io/s/xwnz2npop

Выше приведена демонстрационная картинкаобразца проекта.