时间戳

首页 > 解决方案 > 如何在 Angular/Typescript 中更新 KeyValue 数组的值

angular - 如何在 Angular/Typescript 中更新 KeyValue 数组的值

问题描述

我正在使用 Angular/Typescript，我有来自 API 的 JSON 响应

{
  "ID": 34397,
  "AssignedWorkers": {
    "Job1": 1,
    "Job2": 7,
    "Job3": 2,
    "Job4": 1,
    "Job5": 1,
    "Job6": 6,
    "Job7": 9,
    "JobN": 2
  }
}

这些工作是动态的，可以返回任何名称。为此，我定义了以下接口：

export interface Deck {
    ID:             number;
    AssignedWorkers:     Jobs[];
}

export interface Jobs {
    [Job:string]: number;
}

我可以获得每个工作的价值，但我无法改变特定工作的价值。

更新对象的函数是这样的：

  updateJob(Job:string,Workers:number): void {
    for (var property in this.objOffice.Jobs) {
      if (property === Job) {
        this.objOffice.Jobs[property] = Workers;
      }
    }
  }

错误是这样的：类型“数字”不可分配给类型“工作”

如果我只知道作业的名称，如何更改作业的值？

标签： angulartypescript

解决方案

Deck如果您与 API 响应进行比较，您的接口定义似乎有一个小错误。

您的 API 包含一个数字字典，但在您的界面中，您将 Jobs 定义为一个数组。

假设 API 响应是您想要建模的，我相信这是正确的接口：

interface Deck {
    ID: number;
    AssignedWorkers: Jobs
}

interface Jobs {
    [Job:string]: number
}

其次，我认为稍微重写您的函数可能会更有益，以便它接受将要变异的对象的副本，否则您将无法使用该函数，除非那个硬编码引用。

使用 Copy，避免突变

      updateJob(deck: Deck, entry: string, worker: number): Deck {
          // optionally create a copy to avoid unexpected mutations
          const updatedJobs = {...deck, AssignedWorkers: {...deck.AssignedWorkers}};
          if(entry in updatedJobs.AssignedWorkers) updatedJobs.AssignedWorkers[entry] = worker;
          return updatedJobs
      }

用法

 this.currentJobs = this.updateJob(this.currentJob, "Job1", 10);

没有复制，导致突变

      updateJob(entry: string, worker: number) {
          if(entry in this.jobs.AssignedWorkers) 
            jobs.AssignedWorkers[entry] = worker;
      }

推荐阅读