Angular 5 - 编辑数组函数 - 如何

Question

我正在开发一个Angular 5项目，我有一个数组的Add和Remove函数。

见下文：

addIT() {
    this.widgets.push({ id: 1, title: 'widget', config: { sizex: 1 } });
 }

我最终需要作为EDIT函数，以便我可以编辑当前数组对象..

我该怎么做呢？

Answer 1

您可以使用Array.prototype.find()获取所需的元素，然后进行所需的任何修改，如下所示：

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

或者，如果您想一次进行多次编辑，可以传入一个对象并使用Object.prototype.assign，如下所示：

editIT(id, changes) {
  var elem = this.widgets.find(elem => elem.id === id);
  if (elem !== null) {
    elem = Object.assign(elem, changes);
  }
}

要处理嵌套属性，可以对上面的第一个解决方案使用以下修改：

editIT(id, prop, value) {
    var elem = this.widgets.find(elem => elem.id === id);
    if (elem !== null) {
        var props = prop.split(".");
        // grab all except last property - we want the last property's containing object
        var propToEdit = props.slice(0, props.length-1).reduce(function (el, _prop) {
            // return nested object until last containing object
            return el[_prop];
        }, elem);
        // set value on last property's containing object to the value passed in
        propToEdit[props[props.length-1]] = value;
    }
}