如何使用 ngfor 循环显示数组中的每个组件

Question

我正在设置一个页面来保存来自用户的一堆数据输入，一个组件user-info，包含一个名为semester-info 的其他n 个组件的数组。

我有一个ngfor 循环遍历Components 数组并尝试显示所有这些。相反，它只是显示文本Object object。我有组件工作，如果我改为这样做

<app-empty-term id = "1" semsester={{semesterCount}} startYear={{currentUserYear}} term ={{currentUserTerm}} class="card">

它按预期显示，所以我知道该组件按预期工作。

我已经确保将元素添加到我的术语数组中并且这是正确的，如果我执行类似的操作

{{element.name}}

我得到了数组中每个组件的预期答案。

我做了很多研究，但运气不佳，这让我开始怀疑这是否可能，或者我是否应该以不同的方式来解决这个问题

<div id="sampleContainer" class="card-container" *ngFor="let element of terms">
        <div>{{element}}</div>
    <!-- <app-empty-term  id = "1" semsester={{semesterCount}} startYear= {{currentUserYear}} term ={{currentUserTerm}} class="card"></app- empty-term> -->
    </div>

这段代码的注释部分是我的一些示例 预期，在这种情况下，如果未注释，将有 n 适用于大小为 n 的术语数组的 app-empty-term 组件，但是它们 没有链接到我的术语数组，所以如果我尝试访问他们的数据， 预期的数据将不存在

我希望组件显示 n 次，但它只是显示文本 Object 对象 n 次。

Answer 1

如果您在每次迭代中的 element 是 component，那么这应该可以按预期工作，您可以在此处了解有关 *ngComponentOutlet 的更多信息 ngComponentOutlet

<div id="sampleContainer" class="card-container" *ngFor="let element of terms">
    <ng-container *ngComponentOutlet="element"></ng-container>
</div>

Answer 2

理想情况下，您的 EmptyTermComponent 上应该有一个 @Input 属性。像这样的：

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

@Component({
  selector: 'app-empty-term',
  templateUrl: './empty-term.component.html',
  styleUrls: ['./empty-term.component.css']
})
export class EmptyTermComponent implements OnInit {

  @Input() term: any;

  constructor() { }

  ngOnInit() {
  }

}

然后您将 term 作为输入传递给您的父组件：

类似这样的：

<div id="sampleContainer" class="card-container" *ngFor="let term of terms">
    <!-- <div>{{element}}</div> -->
    <app-empty-term
    [term]=term
    class="card">
  </app-empty-term>
</div>

假设您的 terms 数组看起来像这样：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  terms = [
    { id: 1, semesterCount: 1, startYear: 2021, term: 1, name: 'Term 1' },
    { id: 2, semesterCount: 2, startYear: 2022, term: 2, name: 'Term 2' },
    { id: 3, semesterCount: 3, startYear: 2023, term: 3, name: 'Term 3' },
    { id: 4, semesterCount: 4, startYear: 2024, term: 4, name: 'Term 4' },
  ];
}

---

这里有一个Working Sample StackBlitz 供您参考。