在 Angular 中创建虚拟模型答案

【问题标题】：Creating Dummy Model In Angular在 Angular 中创建虚拟模型
【发布时间】：2019-06-12 16:51:48
【问题描述】：

我试图在 Angular 中创建一个虚拟模型以从后端获取值。但是由于数组，它会抛出一些错误。

abc.ts

export class abc {

    date: Date;
    time: string;
    ABC_Info: [{
            item: string,
            quantity: number,
            a: number
        },
        {
            item: string,
            quantity: number,
            a: number
        }
    ]

    constructor(date: Date, time: string, item: string, quantity: number, a: number) {
        this.meal_time = meal_time;
        this.date = date;
        this.time = time;

        this.ABC_Info[0].item = item;
        this.ABC_Info[0].quantity = quantity;
        this.ABC_Info[0].carbs = a;

        this.ABC_Info[1].item = item;
        this.ABC_Info[1].quantity = quantity;
        this.ABC_Info[1].carbs = a;

    }
}

abc.service.ts

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

getABCs(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 abc(
                    new Date(k['date']),
                    k['time'],
                    k['item'],
                    k['quantity'],
                    k['a']))

            )
        )
}

浏览器控制台出错

错误类型错误：无法读取新的未定义的属性“0” Bolus(abc.ts: 39) at abc.service.ts: 33 at Array.map() 在 MapSubscriber.project(carb.service.ts: 33) 在 MapSubscriber.push.. /node_modules/rxjs/_esm5/内部/运营商/ map.js.MapSubscriber._next(map.js: 35) 在 MapSubscriber.push../ node_modules/rxjs/_esm5/内部/ Subscriber.js.Subscriber.next(Subscriber.js: 54) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/ 运营商/map.js.MapSubscriber._next(map.js: 41) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/ Subscriber.js.Subscriber.next(Subscriber.js: 54) 在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/ 运营商/mergeMap.js.MergeMapSubscriber.notifyNext(mergeMap.js: 84) 在 InnerSubscriber.push../node_modules/rxjs/_esm5/internal/ InnerSubscriber.js.InnerSubscriber._next(InnerSubscriber.js: 15)

【问题讨论】：

不知道是否真的需要添加this.ABC_Info = []; 将其初始化为数组。也许将抛出的错误消息添加到问题中，可能会有所帮助。
我已经更新了问题
“我遇到错误”没有帮助 - 有必要先解释您要做什么。
我已经展示了我的错误看看

标签： angular typescript

【解决方案1】：

你应该试试这个： Angular 2 declaring an array of objects

在我看来，您正在尝试为您的数组定义一个类型，但还试图为两个对象创建空间，这不是您应该这样做的（请参阅链接）。

您遇到的错误是因为当您尝试访问 0 索引时您的数组未初始化（通过带有断点的控制台检查，您将看到您的数组未定义）。

【讨论】：

【解决方案2】：

这是定义模型的方法：

export interface Abc {
  date: Date;
  time: string;
  ABC_Info: {item: string, quantity: number, a: number}[]
}

然后在你的 http 服务中：

getAbc(): Observable<Abc> {
  return this.http.get('some api').pipe(map(res => res.json)); // Remove pipe if angular version is below 6
}

【讨论】：