如何使用 ngTemplateOutletcontext (Angular 7) 保留双向绑定

Question

我需要设置一些配置表格，它们将动态显示在屏幕上。逻辑背后的对象嵌套很深，所以我需要对其结构做出反应（例如使用 ngFor）。 由于对象内不同层上的内容可以具有相同的表示形式，因此我试图将输入字段外包为模板。 当在一些 for 循环之后我调用我的模板化 HTML，使用上下文传递实际值时，数据的双向绑定在模板中不起作用。 看来，显然传递的是值而不是引用。传递键等在这里也不是选项，因为对象内容是复杂和动态的，这就是为什么我需要从 ng-template 进行输入绑定。

例如在 component.ts 中设置一个对象

test = {time:"08:00"};

在component.html中插入：

<div>
  {{ test.time }}
  <input type="time" [(ngModel)]="test.time"> <!-- works as expected, value changes on input-->
  <ng-template *ngTemplateOutlet="tmplInputTime; context: { value:test.time }"></ng-template>
</div>

<ng-template #tmplInputTime let-value="value">
    <input type="time" [(ngModel)]="value" > <!-- value not changing on input-->
</ng-template>

我在这里缺少什么？ 在此先感谢您的帮助！

Answer 1

而不是传递值传递整个对象像

<div>
  {{ test.time }}
  <ng-template *ngTemplateOutlet="tmplInputTime; context: { value:test}"></ng-template>
</div>

<ng-template #tmplInputTime let-value="value">
    <input type="time" [(ngModel)]="value.time" > <!-- value not changing on input-->
</ng-template>

working demo