Angular中模型数组初始化及传入map时undefined问题求助

我看了你的代码，发现几个关键问题导致abc_Info数组在实例化模型时显示undefined，下面一步步帮你修正：

问题1：构造函数参数类型不匹配 #

你的ABC类中，abc_Info属性的类型是{ item: string, quantity: number, a: number }[]，但构造函数里对应的参数类型写的是[]（空数组类型），这会导致TypeScript的类型检查限制，无法正确接收后端返回的对象数组。

问题2：Service里的笔误 #

在Service的map函数中，你写的是new Bolus(...)，但实际上应该实例化ABC类，这是明显的拼写错误，直接导致模型实例化错误，自然拿不到abc_Info的值。

修正后的代码 #

1. 修正ABC类（abc.ts） #

export class ABC {
  date: Date;
  time: string;
  // 把后端返回的_id字段设为可选，避免类型报错
  abc_Info: { item: string, quantity: number, a: number, _id?: string }[];

  constructor(
    date: Date,
    time: string,
    abc_Info: { item: string, quantity: number, a: number }[]
  ) {
    this.date = date;
    this.time = time;
    this.abc_Info = abc_Info;
  }
}

2. 修正Service代码（abc.service.ts） #

import { ABC } from './models/abc';

getABC(start?: moment.Moment, end?: moment.Moment): Observable<ABC[]> {
  let params = new HttpParams();
  if (start) {
    params = params.append('start', start.toISOString());
  }
  if (end) {
    params = params.append('end', end.toISOString());
  }
  return this.baseService.getParams('/api/abc/getAll', params)
    .pipe(
      map(res => res as Object[] || []),
      map(abcList => abcList.map(k => new ABC(
        new Date(k['date']),
        k['time'],
        k['abc_Info'] // 现在这个数组就能正确传递了
      )))
    );
}

额外提示 #

如果后端返回的字段和模型属性名完全一致，也可以考虑使用对象解构的方式简化实例化，比如：

map(abcList => abcList.map(k => new ABC(
  new Date(k.date),
  k.time,
  k.abc_Info
)))

这样代码可读性会更好。

内容的提问来源于stack exchange，提问作者Felix Christo