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

Question

我想创建一个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曲目由：

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

所以问题是因为项目是字符串，当你开始更新输入字段列表被重新渲染，焦点丢失。从我读过的内容看，尽管应该修正这个问题。我尝试使用trackby而没有模板的额外复杂性，并且它按预期工作。它只是不在这个嵌套的场景中工作。希望有一个为他们工作的时刻，我会确保我使用对象。

以下是希望更好地描述该问题的正确解决方法。 https://plnkr.co/edit/3Il1ND?p=preview

干杯 杆

Answer 1

感谢yurzui该解决方案。看起来，从上下文中删除项目，而只是将索引传递到上下文已解决该问题。

有关更多详细信息，请参见上面的强盗。