Angular-在 *ngfor中只有一个ng -content的项目不同的内容

Question

我希望NGFOR在迭代中使用一个儿童组件：

卡组件，＆lt; card＆gt;：

<div *ngFor="let item of items">
   <ng-content [value]="item">
   </ng-content>
</div>

使用卡组件：

<card>
   <child-comp1> Hello </child-comp1>
   <child-comp2> Goodbye </child-comp2>
   <child-comp3> See you </child-comp3>
   ...
</card>

预期结果：

<card>
   <child-comp1> Hello item1</child-comp1>
   <child-comp2> Goodbye item2</child-comp2>
   <child-comp3> See you item3</child-comp3>
   ...
</card>

当然应该有和数据一样多的数据NGFOR数组使其正常工作。

编辑：上面的景象不代表实际使用的数据和组件，仅在这里说明和解释这个问题。 可能有或少于3个儿童组件，它们比显示值更复杂。

Answer 1

我会尽力帮助您。

首先，我创建了一个主类，该类将调用所有卡组件。
main.component.html

<div *ngFor="let item of items">
  <app-card [values]="item">
  </app-card>
</div>

main.component.ts
例如，您只需要在此处使用数据：

items: string[][] = [['it1.1','it1.2','it1.3'],['it2.1','it2.2','it2.3'],['it3.1','it3.2','it3.3']];

在您的卡组件中：
card.component.html

<ul>
    <li>Hello {{values[0]}}</li>
    <li>Goodbye {{values[1]}}</li>
    <li>See you {{values[2]}}</li>
</ul>

card.component.ts
（需要输入）

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

@Input() values: string[] = [];