Angular 变量错误未定义

Question

我的 Angular 程序有问题。 我总是得到未定义的错误变量。

这是在我的组件中定义变量

export class OrdersDetailComponent implements OnInit {
title = 'Order';
menus = [];
order: Array<{
    code: String
}>;
ngOnInit() {
    var id = this.route.params.subscribe(params => {
        var id = params['id'];

        if (!id)
            return;

        this.api.post('orders/get', { id: id })
            .subscribe((data) => {
                this.order = data.order;
                this.menus = data.menus;
            },
            response => {
                if (response.status == 404) {
                    this.router.navigate(['NotFound']);
                }
            });
    });
}

这是我的 html

<h3>{{ title }} #{{order.code}}</h3>

控制台总是报错

ERROR TypeError: Cannot read property 'code' of undefined
at Object.eval [as updateRenderer] (OrdersDetailComponent.html:3)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131)
at checkAndUpdateView (core.es5.js:12275)
at callViewAction (core.es5.js:12638)
at execComponentViewsAction (core.es5.js:12570)
at checkAndUpdateView (core.es5.js:12276)
at callViewAction (core.es5.js:12638)
at execEmbeddedViewsAction (core.es5.js:12596)
at checkAndUpdateView (core.es5.js:12271)
at callViewAction (core.es5.js:12638)

感谢您的帮助。

Answer 1

你正在发出一个异步请求，最初数据是未定义的，使用一个安全导航运算符(安全导航运算符可以用来防止 Angular 抛出错误，当试图访问不存在的对象的对象属性)检查结果是否存在，然后访问数据

<h3>{{ title }} #{{order?.code}}</h3>

编辑

创建一个类如下，保存为order.ts，

export class Order{
    code: string;
}

然后导入你的组件，

order : Order[];