Не удается прочитать свойство (Angular6 + Firebase)

Question

Я изучаю Angular и Firebase и создаю тестовый проект.Я застрял с получением данных из Firebase.

Есть проект - https://embed.plnkr.co/lpwsbuVpS3MuAYpnTgRY/ * (но, к сожалению, он не работает)

Основная идея - у нас есть список серверовна главной странице приложения.Нажав на кнопку «Изменить», мы можем перейти на страницу /server-info/{server-id} и просмотреть все детали текущего сервера.

Итак, проблема, с которой я столкнулся, заключается в том, что при переходе на страницу редактирования возникает ошибка TypeError: Cannot read property 'mainip' of undefined.Вот код ServerInfoComponent

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import * as firebase from "firebase";

@Component({
  selector: 'app-server-info',
  templateUrl: './server-info.component.html',
  styleUrls: ['./server-info.component.css']
})
export class ServerInfoComponent implements OnInit {

  id: string;
  currentServer: any;

  constructor(private route: ActivatedRoute) {}

  getServerInfo() {
    firebase.database().ref('Servers/' + this.id).on('value', snap => {
      this.currentServer = snap.val();
    });
  }

  ngOnInit() {
    // get id of current server
    this.id = this.route.snapshot.params['id'];
    this.getServerInfo();
  }

}

console.log() в getServerInfo() метод возвращает объект с необходимыми данными

На самом деле, он работал, пока я не решил создать db.service.tsгде я планировал добавить все методы для работы с Firebase.Я изменил AllServersComponent для работы с этим сервисом и после этого разрыва страницы ServerInfo.

Answer 1

Я не уверен, что происходит, потому что я не вижу, где вы используете класс Server.Но я бы изменил вам класс

export class Server {
    constructor(
        public mainip: string,
        public provider: string,
        public company: string
    ) {}
}

на интерфейс

export interface Server {
        mainip: string;
        provider: string;
        company: string;
}

Кажется, что вы создаете класс и назначаете его неопределенному.

Answer 2

Когда ваш компонент создан, currentServer не определено.Вы делаете вызов, чтобы получить значение для него, но это не сразу, и Angular отображает страницу в этом состоянии.В вашем html {{ currentServer.mainip }} есть то, что вызывает проблему.Вот почему вы видите, что TypeError: Cannot read property 'mainip' of undefined, currentServer не определено.

Есть несколько способов решить эту проблему в зависимости от того, что вы хотели бы, чтобы произошло.Проще всего было бы использовать null/undefined проверку синтаксиса Angular.Измените свой HTML-код на: {{ currentServer?.mainip }}.Когда представление будет отображено в первый раз, currentServer будет undefined, поэтому Angular вернет пустую строку.Когда ваш вызов Firebase возвращает и присваивает значение currentServer (при условии, что вызов данных возвращается с объектом, а не со значением null или undefined), представление обновит и прочитает значение свойства mainip изваш объект и отобразить его на экране.

ОБНОВЛЕНИЕ

Если вы не хотите показывать экран пользователю до тех пор, пока данные не будут получены из firebase, есть как минимум два варианта...

1. Самое простое - использовать * ngIf
2. Правильный способ - использовать разрешение в вашем роутере, как описано на сайте angular

ОБНОВЛЕНИЕ 2

Измените ngOnit на следующее (ParamMap импортировано из '@ angular / router'):

  ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get('id');
      this.getServerInfo();
    });
  }