Question

我有一个通用组件，该组件是标题和值的列表。为了使这个泛型成为一个通用对象，我传入一个包含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)" />

我尝试使用 [（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接收数据，一切正常。

在通用组件中使用ngModel

1 个答案: