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 trackList by：

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

所以问题是因为当您开始更新输入字段时，项目是字符串，重新呈现列表并且焦点丢失。从我所读到的，虽然轨道应该解决这个问题。我尝试使用trackby而没有模板的额外复杂性，它确实按预期工作。它只是在这个嵌套场景中不起作用。希望有一个解决方法，我会确保我使用Objects。

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

干杯杆

Answer 1

感谢yurzui的解决方案。似乎从上下文中删除项目而只是将索引传递到上下文中已解决了问题。

有关详细信息，请参阅上面的掠夺者。

Answer 2

NgTemplateOutlet #ngOutletContext已被删除，因为自v4起已弃用。改用NgTemplateOutlet #ngTemplateOutletContext

Angular2 * ngFor使用嵌套的ngTemplateOutlet和带文本输入的ngOutletContext

2 个答案: