Как я могу передать интерполяцию в дочерний компонент?

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 в дочерний компонент, чтобы, возможно, код выглядел следующим образом?

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

То, что вы пытаетесь сделать, невозможно. Сама интерполяция является строкой. Поэтому, если вы попытаетесь отобразить это, он просто выдаст вам строку. Он не будет оценивать интерполяцию. Интерполяция используется для оценки строк и шаблонных выражений в вашем HTML. [innerHTML] не будет работать, потому что это просто не "HTML".

Я не уверен, почему вы хотите передать интерполированную строку в первую очередь. Вам необходимо использовать интерполяцию для отображения значений в шаблоне вашего дочернего компонента. Ваш набор данных также кажется неверным. Вам нужно передать массив для ngFor. Ваш второй ngFor с другой стороны пытается зациклить объект.

Вот как это должно выглядеть.

родитель-component.ts

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

ребенок-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>

Answer 2

Ответ - да, вы можете передать все, что захотите, в дочерний компонент, используя @Input. Однако, чтобы сделать таблицу действительно многоразовой, я бы порекомендовал что-то вроде этого:

В дочернем (табличном) файле 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>
.
.
.