Использование ngModel внутри универсального компонента

Question

У меня есть общий компонент, который представляет собой список заголовков и значений.Чтобы сделать этот Generic, я передаю объект, который содержит 2 функции отображения, одна из этих функций предназначена для чтения, а другая для записи.

Это функция отображения для чтения.

read: ((s: ValidDto) => idx(s, _ => this._datePipe.transform(new Date(_.Incident.Date), 'dd/MM/yyyy hh:mm'))),

Этофункция отображения записи.

write: (s: ValidDto, val: Date) => s.Incident.Date = val

Поэтому каждое передаваемое мной свойство будет иметь одно из них, указывающее на другое свойство внутри объекта данных из API.

В самом компонентеидея заключается в том, что если мы находимся в редактируемом состоянии, мы хотим обновить объект данных из API.

В настоящее время у меня есть этот код в HTML:

<input *ngIf="edit" type="text" [ngModel]="item2.read(data)" (ngModelChange)="item2.write(data, $event)" />

Iпытался использовать [(ngModel)] , но это не принимает функцию сопоставления.

Как еще можно этого добиться?

Answer 1

Я проверил, чтобы это работало:

constructor() {
  interval(5000).subscribe(_ => this.dto =  { value: 10 });
}

dto = { value: 5 };
item2 = this.createWrapper(dto => dto.value.toString(), (dto, val) => dto.value = val);

public createWrapper(readFn, writeFn) {
  return {
    read: (dto) => readFn(dto),
    write: (dto, x) => writeFn(dto, x),
  };
}

Просмотр:

<input type="text" [ngModel]="item2.read(dto)" (ngModelChange)="item2.write(dto, $event)" />
<br />
{{ dto.value  }}

Я использовал интервал для имитации получения данных из API, все работает нормально.