Question

我的角度计划遇到了麻烦。我总是得到未定义的错误变量。

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

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

您正在发出异步请求，最初数据将是未定义的，请使用 safe navigation operator （安全导航操作符可用于在尝试访问对象属性时阻止Angular抛出错误（不存在的对象）检查结果是否存在然后访问数据

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

修改

按如下所示创建一个类并将其另存为order.ts，

export class Order{ code: string; }

然后在您的组件中导入，

order : Order[];

Answer 2

您可以创建一个函数来检查未定义的变量。

` SafetyCheck(fn:any)
{
    try{
      return fn();

    }catch(e){
      console.log(e);
      return undefined;

    }

  }`

然后改变这个 this.order = data.order; this.menus = data.menus;

为此

this.order = SafetyCheck(()=>data.order);
this.order = SafetyCheck(()=>data.menus);

角度变量错误未定义

2 个答案: