如何在角度/离子中使用带有 *ngFor 循环变量的双向绑定（自定义变量）？

Question

我是 angular 开发人员，正在尝试创建与[(ngModel)]相同的功能，但它是自定义名称，例如[(ionModel)] 。

我可以使用 ionic 中的@input和@output装饰器来创建它。 当我将它与*ngFor变量一起使用时会引发错误...

有用：

TS

title:any = "demo";

HTML

<Custom-Component  [(ionModel)]="title" ></Custom-Component>
<span> Changed title :  {{title}} </span>

在这里，如果我更改标题，那么它将反映在Custom-Component中。 如果它在Custom-Component中发生变化，那么它将反映在主（父）组件中

但是这段代码不能工作：

TS：

arr:any = [ { title: '' }, { title: '' } ];

HTML：

<div *ngFor="let item of arr">
   <Custom-Component  [(ionModel)]="item.title" ></Custom-Component>
   <span> Changed title :  {{item.title}} </span>
</div>

它向我显示错误，例如：

Cannot assign value "$event" to template variable "item.title". Template variables are read-only.

引发此错误是因为当子custom-compoent尝试更改此父变量时。 它不能这样做，因为我们绑定的变量是模板变量，它是由*ngFor只读创建的。

有没有办法解决这个错误并更新数组的项目而不是更新item （模板变量）？

如果有人能解决这个问题，请帮助我！！