如何使用ngTemplateOutlet上下文（Angular7）保留双向绑定

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