创建一个 Angular 组件以显示一组 html table 单元格以嵌入其他 tables

Question

我有很多 html table 共享相同的 15 列以及每个 table 特定的自定义列。我想将这些常见的 15 列创建为一个组件，该组件接收一组数据并显示为没有包装器的 15 td。我不知道如何创建一个 Angular 组件，该组件不在 DOM 中显示包装器标签并允许我传递输入。以下是我想做的事情：

<tr *ngFor="let item of items">
  <td>Column 1</td>
  <my-common-columns [data]="item"></my-common-columns>
  <td>Another column</td>
</tr>

不幸的是，在上面的代码中，<my-common-columns> 标记出现在呈现的 DOM 中，这打乱了 table。 tr 标签下只能有 td。

我也尝试了 <ng-container *ngComponentOutlet="myCommonColumns">，因为 ng-container 没有出现在 DOM 中，但我不知道如何将 data 传递给它。

Answer 1

为什么不用下面的代码？

<tr *ngFor="let item of items">
  <td>Column 1</td>
  <td> {{ item }}</td>
  <td>Another column</td>
</tr>

Answer 2

根据您的数据结构，您可能会这样做：

<td *ngFor="let col of item">{{ col }}</td>

Answer 3

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

@Component({
  selector: 'my-common-columns',
  template: `<ng-template let-item>
  <td>inner item1:{{item}}</td>
  <td>inner item2:{{item}}</td>
  </ng-template>`
})
export class CommonComponent {
  @ViewChild(TemplateRef) template: TemplateRef<any>;
}


@Component({
  selector: 'my-app',
  template: `
  <table>
    <tr *ngFor="let item of data">
      <td>first</td>
      <ng-template [ngTemplateOutlet]="common.template"
                 [ngTemplateOutletContext]="{$implicit: item}">
      </ng-template>
      <td>last</td>
    </tr>
  </table>
<my-common-columns #common></my-common-columns>
  `
})
export class AppComponent  {
  data = [1, 2, 3, 4, 5];
}

live example

结果：

ngComponentOutlet 也会在 HTML 中显示标签。或者，您应该使用抽象来显示复杂问题的表格。

Answer 4

您必须将组件用作属性。所以把它放到 <td my-common-column></td> 并在你的组件中更改 selector: [my-common-column]。这些 [ ] 括号允许您将组件用作属性。

创建一个 Angular 组件以显示一组 html table 单元格以嵌入其他 tables

Create an Angular component to display a set of html table cells to embed in other tables

html

angular-template

angular-components

angular