Question

我有一组FormGroup，称为fgList，在组件中初始化。因此：

const fgList = [
    new FormGroup({ /* ... */),
    new FormGroup({ /* ... */)
];

对于模板，我想将 * ngFor 与 ng-template 关联使用？

<div *ngFor="let fg of fgList">
    <ng-container *ngTemplateOutlet="colorText; context: fg"></ng-container>
</div>

<ng-template #colorText>
    <span class="red">{{ fg.get('name').value }}</div>
</ng-template>

它总是说无法读取未定义的属性'get'。我可以知道如何通过fg并在模板中使用它吗？

Answer 1

因为您的 * ngFor 已关闭。

尝试使用以下代码：

<div *ngFor="let fg of fgList">
    <ng-container *ngTemplateOutlet="colorText; context: fg"></ng-container>


<ng-template #colorText>
    <span class="red">{{ fg.get('name').value }}</div>
</ng-template>
</div>

Answer 2

您应该在模板中声明fg变量

<div *ngFor="let fg of fgList">
    <ng-container *ngTemplateOutlet="colorText; context:{instance:fg}"></ng-container>
</div>

<ng-template #colorText let-fg="instance"> <!-- access context here -->
    <span class="red">{{ fg.get('name').value }}</div>
</ng-template>

如何设置反应形式的模板上下文？

2 个答案: