Question

我正在像这样循环<td>标签：

        <tbody>
          <tr *ngFor="let item of itemsToShow, index as i">
            <td class="name-column">{{ item.name }}</td>
            <td class="date-column">{{ item.date | datepipe: 'dd/MM/yyyy' }}</td>
          </tr>
        </tbody>

我想将<tbody>作为子组件，并从父组件传递其插值，因为此表在我的应用程序的多个页面中使用。我的问题是，我可以将插值从父级传递到子级组件中，以便代码看起来像这样吗？

parent-component.ts：

  public tabledata = [
    {
      value: `{{ item.name }}`, style: /* some style */
    },
    {
      value: `{{ item.date | datepipe: 'dd/MM/yyyy }}`, style: /* some style */
    }
  ];

child-component.html：

<tbody>
  <tr *ngFor="let item of itemsToShow, index as i">
    <td *ngFor="let val of tableData"
      [ngStyle]="val.style">
      <!-- put the interpolation here, can I use val.value? --></td>
  </tr>
</tbody>

我尝试使用[innerHTML]，但它仍然仅呈现普通字符串。我如何才能达到该条件，或者有另一种方法可以达到该条件？

Answer 1

答案是肯定的，您可以使用@Input将任何内容传递给子组件。但是，为使该表真正可重用，我建议使用类似以下内容的

：

在Child（表）component.ts文件中

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

@Component({
    selector: 'app-data-table',
    template: 
    `
            <tr *ngFor="let row of data.rows">
                <td *ngFor="let val of row.values" [style]="val.style">
                    {{ val.value }}
                </td>
            </tr>
    `
})

export class DataTableComponent {
    @Input data: IStyledValuesCollection;

}

export interface IStyledValuesCollection {
    public IStyledValuesRow[] rows;
}

export interface IStyledValuesRow {
    public IStyledValue[] values;
}

export interface IStyledValue {
    public String value;
    public String style;
}

然后，在父组件html文件中：

.
.
.
<app-data-table [data]="yourData"></app-data-table>
.
.
.

Answer 2

您无法执行的操作。插值本身是一个字符串。因此，如果您尝试渲染它，它只会给您字符串本身。它不会评估插值。 Interpolation用于评估HTML中的字符串和模板表达式。 [innerHTML]无法使用，因为它根本不是“ HTML”。

我不确定为什么首先要传递插值的字符串。您需要使用插值来显示子组件模板中的值。您的数据集似乎也不正确。您需要为ngFor传递一个数组。另一方面，您的第二个ngFor试图遍历一个对象。

这是它的外观。

parent-component.ts

public tabledata = [
    {
      item: item, style: /* some style */
    },
    {
      item: item2, style: /* some style */
    }
];

child-component.html

<tbody>
  <tr *ngFor="let item of tableData, index as i">
    <td class="name-column">{{ item.name }}</td>
    <td class="date-column">{{ item.date | datepipe: 'dd/MM/yyyy' }}</td>
  </tr>
</tbody>

如何将插值传递给子组件？

2 个答案: