Angular-使用箭头函数两种方式绑定对象属性

Question

以下代码有效。它循环在一个对象上，以获取每行一个，然后在每个对象上通过一个数组循环定义每个列显示的内容。

 <tr  *ngFor="let object of objects"
   <td *ngFor="let column of tableColumns;" > 
     {{column.attribute(object)}} //Explained bellow
   </td>
 </tr>

column.attribute是箭头功能，即object => object.a.property。此处建议该解决方案，并用于访问插值中嵌套对象的属性。

当我想以这种方式以"盒子中的香蕉"数据绑定方式访问属性时，出现了问题。

这确实不是工作：

<input type="text" [(ngModel)]="column.attribute(object)">

---

经过一些实验，我找到了解决方法，但它不是那么优雅，因此问题是否可以很好地写入。

我写下了两种方式绑定的两种方式：

<input [value]="column.attribute(object)"(input)="onInput($event, column, object)">

input事件上调用的方法：

private onInput(event, column, object){
        column.attribute(object, event.target.value);
    }

真正糟糕的部分是我的属性方法不再是上述箭头函数，而是一个普通的丑陋函数。

private editPhone(user, newValue = undefined){
    if (newValue != undefined) {
      user.phone = newValue;
    }
    return user.phone
  }

Answer 1

箭头函数允许从对象读取值。如果要将新值写入对象，则需要另一个函数，将新值存储在对象中：

：

<input [ngModel]="column.attribute(object)" (ngModelChange)="column.write(object, $event)" />

当然，您还可以使用单个功能作为读者和作家，就像您在编辑手机功能的问题中所做的那样。

此功能可以完美地写入箭头功能：

(user, newValue) => {
  if (newValue !== undefined) {
    user.phone = newValue;
  }
  return user.phone;
}