对象数组中的 Angular 更新对象

标签 angular typescript

假设我有以下对象数组,我们将其命名为 itemArray;

{
  "totalItems": 2,
  "items": [
    {
      "id": 1,
      "name": "foo"

    },
    {
      "id": 2,
      "name": "bar"
    },
    ]
}

我有一个订阅,它只返回 id 2 的更新结果。我如何在不遍历整个数组的情况下更新对象数组?

我想要的是像下面的例子;

updateUser(user){
    this.myservice.getUpdate(user.id)
    .subscribe(newitem => {
      this.updateArray(newitem);
    });
}

  updateArray(newitem){
    this.itemArray.items[newitem.id].name = newitem.name
  }

或者更好的是,替换整个对象;

  updateArray(newitem){
    this.itemArray.items[newitem.id] = newitem
  }

然而,这个例子根据数组的索引更新数组。那么我该如何改为基于 newitem.id 进行更新呢?

评论中要求的模板:

<tr *ngFor="let u of itemsArray.items; let i = index">
  <td>{{ u.id }}</td>
  <td>{{ u.name }}</td>
  <td>
    <input type="checkbox" checked="u.accepted" [(ngModel)]="itemsArray.items[i].accepted" (ngModelChange)="updateUser(u)">
    <label for="singleCheckbox-{{i}}"></label>
  </td>
</tr>

最佳答案

我创建了这个 Plunker根据您的示例,更新对象等于 newItem.id

这是我的函数片段:

showUpdatedItem(newItem){
    let updateItem = this.itemArray.items.find(this.findIndexToUpdate, newItem.id);

    let index = this.itemArray.items.indexOf(updateItem);


    this.itemArray.items[index] = newItem;

  }

  findIndexToUpdate(newItem) { 
        return newItem.id === this;
  }

关于对象数组中的 Angular 更新对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44120645/

相关文章:

javascript - 如何在对话框窗口上放置确认对话框?

javascript - 如何在 Angular5 或 Javascript 中以日期形式显示数据?

javascript - Protractor - ngFor 循环

用大括号包裹的 typescript 返回值?

typescript - 如何在 TS 2.0 之后正确获取 Aurelia 的 TypeScript 类型定义文件 (*.d.ts)。发布?

javascript - 如果单击的是 div 内的按钮,则忽略 div 单击

unit-testing - 如何模拟服务?

node.js - 语法错误 : Unexpected token U in JSON at position 0 at JSON. 在 angular8 中解析

typescript - RxJS 可观察 : Emit every specific change in the array

data-binding - 在 Angular 2 中加载第一页时设置 [(ngModel)] 的值