将表格数据输入新组件时，表格数据未与表格标题内联

Posted 2023-03-05

【中文标题】将表格数据输入新组件时，表格数据未与表格标题内联

【英文标题】：Table data not inline with table headers when inputting the table data into a new component

【发布时间】：2019-03-02 06:43:43

【问题描述】：

所以我正在尝试创建一个基本表。我在一个组件上有我的表头，然后在另一个组件中有我的表数据。我通过 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>

问题在于这会显示未内联的数据，如下图所示：

以前有人遇到过这个问题吗？

【问题讨论】：

“非内联”是什么意思？也许您可以右键单击它并选择“检查元素”并查看呈现的 html？我猜 Angular 在 HTML 中放置了一个 <tenancy-card> 元素，导致生成无效的 HTML。

@HereticMonkey 与表数据中一样，即电子邮件未与其相应的标题对齐，即电子邮件

您可以使用百分比格式添加css宽度属性，例如每个行元素采用特定宽度（例如50％），这应该可以解决问题。

【参考方案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

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