如何使用ngTemplateOutlet context(Angular7)保留双向绑定

Question

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

例如，在组件中设置一个对象

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

在组件.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>

工作演示