Angular 5 - 使用函数发布编辑数组

Question

我在函数调用时遇到了一些麻烦。首先这里是数据：

this.widgets = [
{ id: 1, title: 'widget', config: { sizex: 1 } }
]

这是功能：

editIT(id, prop, value) {
  var elem = this.widgets.find(elem => elem.id === id);
  if (elem !== null) {
    elem[prop] = value;
  }
}

我的问题是我可以编辑标题，如下所示：

<button (click)="editIT(1, 'title', 'some other title')">Edit Title</button>

上面的工作，但我现在想编辑sizex属性，如下所示：

<button (click)="editIT(1, 'config.sizex', 2)">Edit Sizex</button>

并且没有编辑sizex。

我做错了什么？

Answer 1

您可以创建一个为您迭代嵌套键并更新值的函数：

editIT(id, prop, value) {
  var elem = this.widgets.find(elem => elem.id === id);
  if (elem !== null) {
    updateValue(prop, elem, value);
  }
}

function updateValue(key, obj, value) {
    let keys = key.split(".");
    let finalKey = keys.pop();
    let finalObj = keys.reduce((res, key) => res[key], obj);
    finalObj[finalKey] = value;
}