在构造函数中初始化Array并在Angular中传递给map [英] Initialize Array in constructor and pass into map in Angular

问题描述

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

I am trying to create a model in angular and passing that into map function in service. I have one array in that model. When I pass that its showing undefined and except that array rest of the values are coming well. I think I am doing wrong in initializing and calling array. Can any tell me how to do it.

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
      }
    ]
  }
]

推荐答案

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

There several places you are using the get() weirdly, actually you should try to use more of the TypeScript.

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

If the response is already json then you can use

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

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

If the response is text format then perhaps you can directly use

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

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

Via this basic trick we can directly get the data and present it with

<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>

您可以查看在线演示我在其中使用 拦截器 模拟服务器响应.

You can check the online demo in which I am using interceptor to mock the server response.

这篇关于在构造函数中初始化Array并在Angular中传递给map的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！