Question

如何为Typescript中的对象数组中的对象添加值？

说我有一个这样的对象数组：

[{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}]

我想要的是在数组的每个对象中动态生成的属性，如下所示：

[{name:'John',age:20, value:'John 20'}, {name:'Sam',age:26, value:'Sam 26' }, {name:'Will',age:2, value:'Will 2'}]

这是我尝试的方法：：我创建了一个用于类型检查的模型，并在其中创建了一个将返回值的方法。

export class Names {
    name: string;
    age: number;
    constructor() {
    }
    getConcat() {
        return this.name + ' ' + this.age;
    }
}

尽管从类型Names[]的服务器获取数据时，却无法获取动态生成的值。我正在尝试获取这样的值：

this.somevariable:Names[]=[];  //declarartion
this.somevariable[0].getConcat() // inside a method after api call

我该怎么做？任何帮助将非常感激。谢谢！

Answer 1

创建类时进行类型检查的目的-我猜您将javascript的class和打字稿的interface混合在一起：

interface仅在开发期间出现，并已出现在实际的生产应用程序中。 class是活动的js对象，已被编译为应用程序中的功能对象。

类型检查的界面可能如下所示：

interface Name {
  name: string;
  age: number;
  getConcat: () => string; // hints about the presence of a function that returns a string, within the typed object - but is not a function by itself!
}

当一个类需要一些修改时

export class Names {
    name: string;
    age: number;

    constructor(name: string, age: number) { // pass arguments to initialize the class object
      this.name = name;
      this.age = age;
    }

    getConcat() {
        return this.name + ' ' + this.age;
    }
}

使用interfaces，可以说您拥有的名称数组的类型为Name[]，表示：

function getConcat () {
   return this.name + ' ' + this.age
}

const names: Name[] = [{name: 'a', age: 1, getConcat: getConcat }, {name: 'b', age: 2, getConcat: getConcat },...];

在整个代码开发过程中，系统会提示您有关预先设置的getConcat方法的信息，并警告您当前或将来是否存在该方法。

但是为了同时使用该类进行类型检查和getConcat函数，您将必须将每个对象映射到一个类中：

const objects = [{name: 'a', age: 1}, {name: 'b', age: 2}];
const names: Name[] = objects.map(obj => new Name(obj.name, obj.age));

现在，对于Name数组中的每个项目，您都可以访问在names类中声明的任何方法。

您实际上可以将两者混合使用，如上所示初始化js类，同时对class本身进行类型检查：

export class Name implements NameInterface {
    name: string;
    age: number;

    constructor(name: string, age: number) { 
      this.name = name;
      this.age = age;
    }

    getConcat() {
        return this.name + ' ' + this.age;
    }
}

现在，如果您的class对象尚未实现声明的NameInterface成员中的任何成员，您将得到警告（假设您忘记在类中添加getConcat函数）。 / p>

Answer 2

要插入新属性，则应这样写：arr[i].value = arr[i].name + ' '+ arr[i].age;。从API获取数据后，将其存储在数组中，然后按照以下所示操作来更新数组。

以下是有效示例：

arr = [{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}];

for(let i=0;i<3;i++){
    arr[i].value = arr[i].name + ' '+ arr[i].age;
}

console.log(arr);

Answer 3

arr = [{name:'John',age:20}, {name:'Sam',age:26}, {name:'Will',age:2}];



const generateValue = (items) => {
  return items.map(x=> {
    return {...x, value: `${x.name} ${x.age}`};
  });
};

arr = generateValue(arr);
console.log(arr);

您可以创建这样的功能

如何在TypeScript对象数组中为对象动态添加值？

3 个答案: