Angular2 *ngFor 与嵌套的 ngTemplateOutlet 和 ngOutletContext 与文本输入答案

【问题标题】：Angular2 *ngFor with nested ngTemplateOutlet and ngOutletContext with text inputAngular2 *ngFor 与嵌套的 ngTemplateOutlet 和 ngOutletContext 与文本输入
【发布时间】：2017-06-02 05:41:51
【问题描述】：

我正在尝试创建一个包装项目的 List 组件。当列表项是对象时，这一切都工作得很好，但是当列表项是字符串时，即使使用 trackBy 索引，我也无法让它工作。

调用代码：

<app-list [list]="_question.options" [title]="'Options'" [columnTemplate]="listBody" (onDelete)="onDeleteOption($event)"
    (onMove)="onMoveOption($event)" (onAdd)="onAddOption()">
</app-list>

<ng-template #listBody let-index="index" let-item="item" let-list="list">
    <td class="vertical-middle">
        <app-input [(ngModel)]="list[index]"></app-input>
    </td>
</ng-template>

组件代码：

<tr *ngFor="let item of list; let i = index; trackBy:trackListBy;">
<ng-template [ngTemplateOutlet]="columnTemplate" 
[ngOutletContext]="{item: item, index: i, list: list}"></ng-template>

component.ts trackList by:

trackListBy(index: number, item: T) {
    return index;
}

所以问题在于，当您开始更新输入字段时，这些项目是字符串，列表被重新渲染并且焦点丢失。从我读过的曲目来看，应该可以解决这个问题。我尝试在没有模板额外复杂性的情况下使用 trackby，它确实按预期工作。它只是在这种嵌套场景中不起作用。希望有一个解决方法，我会确保我使用对象。

这是正确的 plunker，希望能更好地描述问题。 https://plnkr.co/edit/3Il1ND?p=preview

干杯棒

【问题讨论】：

plnkr.co/edit/aOsZow?p=preview

标签： angular nested ngfor

【解决方案1】：

感谢 yurzui 提供的解决方案。似乎从上下文中删除项目并仅将索引传递到上下文中已经解决了这个问题。

请参阅上面的 plunkers 了解更多详细信息。

【讨论】：

【解决方案2】：

NgTemplateOutlet #ngOutletContext 已被删除，因为它自 v4 以来已被弃用。请改用NgTemplateOutlet#ngTemplateOutletContext

【讨论】：