Question

我正在尝试创建一个角度模型，并将其传递给使用中的地图函数。我在那个模型中只有一个数组。当我通过它显示 undefined 时，除了数组其余的值都很好。我认为我在初始化和调用数组时做错了。谁能告诉我怎么做。

abc.ts

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

abc.service

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(bolus => bolus.map(k => new Bolus(
                    new Date(k['date']), //Value passing and coming well
                    k['time'], //Value passing and coming well
                    k['abc_Info'] //calling array here, showing undefined when i run
      ))))
}

在后端响应，这就是我要进入前端的原因

[
  {
    "date": "2019-01-18T18:30:00.000Z",
    "time": "2019-01-19T04:52:00.389Z",
    "abc_Info": [
      {
        "_id": "5c42acf9a0048b2a683be22a",
        "item": "Idly",
        "quantity": 15,
        "a": 30
      },
      {
        "_id": "5c42acf9a0048b2a683be229",
        "item": "Sandwitch",
        "quantity": 10,
        "a": 25
      },
      {
        "_id": "5c42acf9a0048b2a683be228",
        "item": "Sandwitch",
        "quantity": 20,
        "a": 25
      }
    ]
  }
]

Answer 1

您在get()上有几个奇怪的地方，实际上您应该尝试使用更多的 Type 脚本。

如果响应已经json，则可以使用

this.http.get<ABC[]>(req);

如果响应为text格式，则也许您可以直接使用

this.http.get<string>(req).pipe(map(s => JSON.parse(s)));
// get the typed array directly

通过这个基本技巧，我们可以直接获取数据并使用

进行呈现

<div *ngFor="let c of _ret">
  <h3>{{ c.time }}</h3>
  <ul>
     <li *ngFor="let info of c.abc_Info">{{ info["item"] }} : {{ info["quantity"] }}</li>
  </ul>
</div>

您可以检查我正在使用online demo来模拟服务器响应的interceptor。

在构造函数中初始化Array并在Angular中传递到地图

1 个答案: