Question

在我的服务中，我从后端请求json数据。（来自本地系统的json文件）

加载后

我看到页面中的值。但同样也得到了错误。似乎在我的数据可用之前，我的模板试图获得价值。

如何防止这个问题？这是我的组件代码：

import { Component, OnInit } from '@angular/core';
import { ServerService } from './shared/service/server.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

    data:Object;

    constructor(private server:ServerService){}

    ngOnInit(){
        this.server.getJSON().subscribe(data => this.data = data );

    }

}

这里是错误：我看到3次同样的错误。同时页面也会呈现我的价值

AppComponent.html:2 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.eval [as updateRenderer] (AppComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
    at checkAndUpdateView (core.js:13849)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callWithDebugContext (core.js:15098)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14635)
    at ViewRef_.detectChanges (core.js:11619)
    at eval (core.js:5918)

Answer 1

要在代码中使用模板，请访问名称。

zookeeper-0.zookeeper

Answer 2

基本上你可以使用ngif直到数据可用

<div *ngIf="data"> 
   {{data.name}}
</div>

编辑：另一种使用方法是使用加载标志

data:Object;
dataLoading=true;

constructor(private server:ServerService){}

ngOnInit(){
    this.server.getJSON().subscribe(data =>{ 
      this.data = data 
      this.dataLoading = false;
    });    
}

<div *ngIf="!dataLoading "> 
   {{data.name}}
</div>

Answer 3

而不是写数据：对象; 写数据：对象= {};

在这种情况下，数据将是一个新的对象，不再是未定义的。

其他方式是onInit函数中的新的your对象，如下所示

{{1}}

Answer 4

您可能正在阅读html中的.name。我认为这是在Promise中转换函数的最佳实践，然后你可以尝试使用它：

async ngOnInit(){
        this.data = await this.server.getJSON();
    }

但是，更具体地说，最好初始化数据对象。例如，如果您只阅读name属性，则可以执行以下操作：

public data: any;

constructor() {
  this.data = {name: null}
}

在数据加载到组件之前阻止视图部分

4 个答案: