Как сохранить двустороннее связывание с использованием контекста ngTemplateOutlet (Angular7) - PullRequest
Новая
       45

Как сохранить двустороннее связывание с использованием контекста ngTemplateOutlet (Angular7)

2 голосов
/ 15 октября 2019

Мне нужно настроить некоторые формы конфигурации, которые будут отображаться на экране динамически. Объект, стоящий за логикой, глубоко вложен, поэтому мне нужно реагировать на его структуру (например, используя ngFor). Поскольку содержимое на разных слоях внутри объекта может иметь одинаковое представление, я пытаюсь передать поля ввода как шаблоны. Когда после некоторых циклов for я вызываю свой шаблонный HTML, передавая фактическое значение с использованием контекста, двусторонняя привязка для данных не работает в шаблоне. Похоже, что значение передается, а не ссылка. Передача ключей и т. Д. Здесь также невозможна, поскольку содержимое объектов является сложным и динамичным, поэтому мне нужно связать ввод из ng-шаблона.

Например, в 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>

Что мне здесь не хватает? Заранее спасибо за помощь в этом!

1 Ответ

0 голосов
/ 15 октября 2019

Вместо передачи значения передайте весь объект что-то вроде 

<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>

рабочая демонстрация

...