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。建议使用此解决方案here，用于在插值中访问嵌套对象的属性。

当我想使用这种以双向“盒中香蕉”数据绑定方式访问属性时，问题就出现了。

不工作：

<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)" />

当然，您也可以使用单个函数作为读者和作者，就像您在editPhone函数中所做的一样。

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

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

Angular - 使用箭头函数双向绑定对象属性

1 个答案: