javascript - 如何使用 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>

The commented out portion of this code is a somewhat sample of what I expected, In this case if that is uncommented there will be n app-empty-term components for a terms array of size n, however they are not linked to my term array so if i try to access their data, the expected data will not be there

我预计组件会显示 n 次，但它只显示文本对象对象 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>