如何使用 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

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

How to preserve two-way-binding using ngTemplateOutlet context (Angular7)

angular

angular-ngmodel

two-way-binding

ng-template