ОШИБКА TypeError: Невозможно прочитать свойство 'id' из неопределенного

Question

Я получил ОШИБКА TypeError: Невозможно прочитать свойство 'id' из неопределенного , когда я перехожу к своему компоненту.После отладки своего кода я обнаружил, где находится моя ошибка, но не могу найти правильный способ ее устранения.Возможно, вы можете мне помочь?

Ниже мой файл .ts:

@Component({
  selector: 'app-forum-thread',
  templateUrl: './forum-thread.component.html',
  styleUrls: ['./forum-thread.component.css']
})
export class ForumThreadComponent implements OnInit {
  @Input() theme: Theme;
  threads: Observable<Thread[]>;

constructor(
  private route: ActivatedRoute,
  private location: Location,
  private themeService: ThemeService,
  private threadService: ThreadService
) { }

ngOnInit() {
  this.getTheme();
  this.getThreads();
}

getTheme(): void {
  this.themeService.getTheme(this.route.snapshot.paramMap.get('theme'))
    .subscribe(theme => this.theme = theme);
}

// Error caused by this method..
getThreads(): void {
  this.threads = this.threadService.getThreads(this.theme.id);
}

и соответствующий ему файл .html:

<div *ngIf="theme">
  <h2>{{ theme.name | uppercase }}</h2>

  <table class="Threads">
     <tr>
       <th>Id</th>
       <th>Date</th>
       <th>Title</th>
       <th>Views</th>
       <th>Thanks</th>
       <th>Comments</th>
     </tr>
     <tr *ngFor="let thread of threads | async">
       <a routerLink="/forum-message/{{theme._id}}/{{thread._id}}">
         <td><span class="badge">{{thread._id}}</span></td>
       </a>
       <td>{{thread.createdAt | date}}</td>
       <td>{{thread.title}}</td>
       <td>{{thread.numberOfViews}}</td>
       <td>{{thread.numberOfThanks}}</td>
       <td>{{thread.numberOfComments}}</td>
     </tr>
   </table>  
 </div>

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

getThreads(): void {
  this.threads = this.threadService.getThreads(
    this.route.snapshot.paramMap.get('theme'));
}

Заранее спасибо за помощь!

Answer 1

Я, наконец, изменил свой код, поместив this.route.snapshot.paramMap.get('theme'); в const перед вызовом моих функций следующим образом:

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('theme');

  this.themeService.getTheme(id)
    .subscribe(theme => {
      this.theme = theme,
      this.getThreadsTheme(theme._id)
    });
}

Answer 2

В блоке ngOnInit вы выполняете две функции асинхронно, поэтому поиск theme в getThreads будет неопределенным.Вам нужно подождать, пока тема не будет установлена.

getTheme(): void {
  this.themeService.getTheme(this.route.snapshot.paramMap.get('theme'))
    .subscribe(theme => {
      this.theme = theme;
      this.getThreads(theme.id);
    });
}

И изменить getThreads на:

getThreads(themeId): void {
  this.threads = this.threadService.getThreads(themeId);
}