数组上的角度图数组上的每一项的映射

Question

我有API以以下格式返回数据：

  

{“数据”：[

     

{path：“某些路径”，site_link：“ link”，功能：   ['feature1'，'feature2']}

     

...]}

下一个服务

Angular

网站响应界面

getSites(): Observable<Site[]> {
    return this.http.get<Site[]>(this.API_URL).pipe(
      map((site: SiteResponse): Site[] => {
        return site.data.map(e => new Site().deserialize(e));
      })
    );
  }

这是一个网站模型

export interface SiteResponse {
  data: {
    path: string,
    siteLink: string,
    features: string[],
  }[];
}

特征模型

export class Site implements Deserializable {
  path: string;
  siteLink: string;
  features: Feature[];

  deserialize(input: any): this {
    Object.assign(this, input);
    console.log('----input', input);
    console.log('----this', this);
    console.log('----features', input.features);
    this.features = input.features.map(feature => new Feature().deserialize(feature));
    return this;
  }
}

这就是我得到的

我不明白为什么它会拆分要素内容，而只是在数组的每个值上创建对象。

在数组的第一个杠杆上它可以正常工作，因为我们看到返回的对象是Site的实例。

Answer 1

SiteResponse中的

features属性引用string []，因此它没有feature属性。 Feature模型中的反序列化方法尝试将字符串分配给对象属性。请尝试以下。

export class Feature implements Deserializable {
  feature: string;

  deserialize(input: any): this {
    this.feature = input;
    return this;
  }
}

Answer 2

发生时，字符串被转换成类似对象的数组。消除反序列化解决了问题。