Angular 2+無法讀取未定義的屬性“ id”

Question

我有一個奇怪的錯誤，我找不到原因。 根據route的：id，我得到了表privateLessons，接下來搜索具有正確ID的那個對象並將其顯示在我的模板中。 最后，我得到了想要的效果，數據可以正確顯示，但是在控制台中出現兩個相同的錯誤：

ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateRenderer] (DetailedAnnouncementComponent.html:3)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
at checkAndUpdateView (core.es5.js:12241)
at callViewAction (core.es5.js:12601)
at execComponentViewsAction (core.es5.js:12533)
at checkAndUpdateView (core.es5.js:12242)
at callViewAction (core.es5.js:12601)
at execEmbeddedViewsAction (core.es5.js:12559)
at checkAndUpdateView (core.es5.js:12237)
at callViewAction (core.es5.js:12601)

如何解決？

詳細-announcement.html

  <div class="detailed-announcement">
    {{ privateLesson.id }}
    {{ privateLesson.subject }}
    {{ privateLesson.category }}
    {{ privateLesson.price }}
    {{ privateLesson.level }}
    {{ privateLesson.voivodeship }}
    {{ privateLesson.city }}
    {{ privateLesson.place }}
    {{ privateLesson.description }}
    {{ privateLesson.author }}
  </div>

詳細-announcement.tmp

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { PrivateLessonsService } from './../../../../services/private-lessons.service';

import { PrivateLesson } from './../../../../classes/private-lesson';


@Component({
  selector: 'app-detailed-announcement',
  templateUrl: './detailed-announcement.component.html',
  styleUrls: ['./detailed-announcement.component.scss']
})
export class DetailedAnnouncementComponent implements OnInit {

  privateLessons: PrivateLesson[];
  privateLesson: PrivateLesson;
  privateLessonIdFromParams: number;

  constructor(
    private _privateLessonsService: PrivateLessonsService,
    private _activatedRoute: ActivatedRoute  
  ) { }

  ngOnInit() {

    this._activatedRoute.params.subscribe(params => {
      this.privateLessonIdFromParams = params['id'];

    });

    this._privateLessonsService
      .getPrivateLessons()
      .subscribe(
        responseData => {
          this.privateLessons = responseData;
          this.privateLesson = this.getDimensionsByFind(this.privateLessons, this.privateLessonIdFromParams);

        }
      );

  }

  getDimensionsByFind(array: any[], id: number){
    return array.find(x => x.id === id);
  }

}

Answer 1

您正在嘗試在服務器響應之前顯示數據，因為您正在對數據進行異步請求。

在您的div上放置一個*ngIf ，以防止它嘗試過早顯示數據。

  <div class="detailed-announcement" *ngIf="privateLesson">
    {{ privateLesson.id }}
    {{ privateLesson.subject }}
    {{ privateLesson.category }}
    {{ privateLesson.price }}
    {{ privateLesson.level }}
    {{ privateLesson.voivodeship }}
    {{ privateLesson.city }}
    {{ privateLesson.place }}
    {{ privateLesson.description }}
    {{ privateLesson.author }}
  </div>