将表数据输入新组件时，表数据不与表头内联

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

上面是示例项目的演示图片。