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

Question

我正在建立一个页面来容纳用户输入的一堆数据，组件user-info，包含n个其他组件的数组，称为semester-info。

我有一个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的term数组的app-empty-term组件，但是它们没有链接到我的术语数组，因此，如果我尝试访问其数据，则预期的数据将不存在

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

我正在建立一个页面来容纳来自用户的一堆数据，一个组件user-info，包含一个由n个其他组件组成的数组，这些数组称为semester-info。我有一个ngfor循环经过...

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

理想情况下，您会在@Input上拥有一个EmptyTermComponent属性。像这样的东西：

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() {
  }

}