Question

我正在尝试使用承诺来加载我的模拟数据，就像Angular2 Tutorial那样here。

服务（模拟）：

import { Injectable } from '@angular/core';
import { ERGEBNISSE } from "./mock-ergebnisse";

@Injectable()
export class ErgebnisMockService {
    getErgebnisse() {
        return Promise.resolve(ERGEBNISSE);
    }
}

组件：

import { Component, OnInit } from '@angular/core';
import { ErgebnisMockService } from "../shared/mocks/ergebnis.mock.service";

@Component({
    moduleId: module.id,
    selector: 'ergebnisse',
    templateUrl: 'ergebnisse.component.html',
    styleUrls: ['ergebnisse.component.css'],
    providers: [ErgebnisMockService]
})
export class ErgebnisseComponent implements OnInit {
    ergebnisse: any;

    constructor(private ergebnisService: ErgebnisMockService) {
    }

    ngOnInit() {
        this.getErgebnisse();
    }

    getErgebnisse() {
        this.ergebnisService.getErgebnisse().then(data => this.ergebnisse = data);
    }

}

我的控制台出现以下错误： ORIGINAL EXCEPTION: TypeError: Cannot read property 'Bereich' of undefined （该属性确实存在于模拟对象上。）

如果我在没有承诺的情况下返回我的mock-Object，一切都按预期工作。（像这样：）

   getErgebnisseWithoutPromise() {
        return ERGEBNISSE;
    }

如果我在解析它后调试我的对象，我会按预期获得模拟对象：

getErgebnisse() {
        this.ergebnisService.getErgebnisse().then(
            data => {
                this.ergebnisse = data;
                console.log(this.ergebnisse);
            }
        );
    }

返回：

Object {Bereich: Array[3]}
>Bereich:Array[3]
>__proto__:Object`

我在这里做错了什么？

非常感谢！

Answer 1

实际上，即使您的承诺直接解决，您的对象也会异步加载。因此，如果您在模板中使用以下内容，则会出现问题，因为ergebnisse在开头未定义：

{{ergebnisse.Bereich}}

您应该使用Elvis运算符来防止这种情况发生。在你的情况下，类似的东西：

{{ergebnisse?.Bereich}}

为了进一步扩展， Jake Archibald 总结了问题的根本原因：

一旦承诺结算，或者它已经解决，它就会为其反动回调排队一个微任务。这确保了即使承诺已经解决，承诺回调也是异步的。

（来自https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules）

以下链接可为您提供更多详细信息：

尝试使用Promise

1 个答案: