Предотвращение просмотра части перед загрузкой данных в компонент

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

Для доступа к имени в шаблоне используйте код ниже.

<div *ngIf="data?.name">

Answer 2

Вместо записи данные: объект; запись данные: объект = {};

в этом случае данные будут новым объектом, который больше не является неопределенным.

Другой способ - создать новый объект в функции onInit, как показано ниже

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

}

Answer 3

Вы, вероятно, читаете .name в своем HTML.Я думаю, что это было бы наилучшей практикой для преобразования вашей функции в Обещании, тогда вы можете попробовать использовать это:

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

НО, если быть более точным, лучше инициализировать ваш объект данных.Например, если вы читаете только свойство name, вы можете сделать это:

public data: any;

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

Answer 4

В основном вы можете использовать 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>