如何在json数据中添加新属性而不使用typescript或javascript在界面中添加

Question

我试图在 josn 数据中添加新属性，而不在界面中添加。但我无法添加它。那么，如何在 json 数据中添加新属性。可不可以？

app.component.ts：

export class AppComponent {
  data1: Candle[] = [
    {
      name: 'john',
      place: 'forest',
      phone: '124-896-8963'
    },
    {
      name: 'Jay',
      place: 'City',
      phone: '124-896-1234'
    },
    {
      name: 'Joseph',
      place: 'sky',
      phone: '124-896-9632'
    },
  ];

  foo() {
    const modifiedData = this.data1.map(d => {
      d.expanded1 = false; // error! 
      //~~~~~~~~~ Property 'expanded1' does not exist on type 'Candle'.
      d.expanded2 = false; // error! 
      //~~~~~~~~~ Property 'expanded2' does not exist on type 'Candle'.
      return d;
    });

    console.log(modifiedData);
  }
}
interface Candle {
  name: string,
  place: string,
  phone: string
}

Answer 1

TypeScript 并不真的喜欢让你改变值的 type，并且向一个未知类型的对象添加新属性会给你一个编译器错误，这是有充分理由的（这很可能是是一个错误）。解决此问题的一种方法是使用

Object.assign()

方法，该方法通过添加其余参数的属性来改变其第一个参数。 TypeScript 的 Object.assign() 调用签名返回输入类型的 交集，这意味着已知输出具有所有输入的所有属性。

这意味着我们可以将您的代码更改为

const modifiedData = this.data1.map(d => {
  return Object.assign(d, { expanded1: false, expanded2: false });
});
/* const modifiedData: (Candle & {
expanded1: boolean;
expanded2: boolean;
})[] */

现在

modifiedData

 已知是一个数组，其元素是 

Candle

 对象，根据需要具有两个额外的 

boolean

 属性。

Playground 代码链接