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

Question

У меня есть простой текст на локальном сервере, который я хочу отобразить на своей веб-странице, используя angular. У меня есть моя модель, сервис и компонент. Итак, я получаю сообщение об ошибке в этой строке >> this.paragraphs = this.announcement.details.split('#');

Я пытался использовать? оператор (this.paragraphs = this.announcement?.details.split('#')) но он не может построить.

МОДЕЛЬ

export class Announcements 
{
    public id: number;
    public details: string;
    public date: Date;
}

СЕРВИС

getAnnouncementById(id)
{
    return this.http.get<Announcements>('http://localhost:49674/api/Announcements/' + id)
                    .pipe(catchError(this.errorHandler));
}

КОМПОНЕНТ-.ts

import { Announcements } from '../models/Announcement';

    export class ReadMoreComponent implements OnInit 
    {
      public announcementId;
      public announcement : Announcements
      public paragraphs = [];

      constructor(
        private route: ActivatedRoute,
        private router:Router,
        private announcementservice: AnnouncementsService
      ){}

      ngOnInit() 
      {
        this.route.paramMap.subscribe((params:ParamMap) => {
          let id = parseInt(params.get('id'));
          this.announcementId = id;

          this.getAnnouncenentById(id)

          //split
          this.paragraphs = this.announcement.details.split('#');
        })
      }

      getAnnouncenentById(id){
        this.announcementservice.getAnnouncementById(id)
        .subscribe(data => this.announcement = data);
    }

КОМПОНЕНТ -. html

<div class="article column full">
     <div *ngFor=" let paragraph of paragraphs">
         <p>{{paragraph.details}}</p>
     </div>
</div>

Answer 1

this.paragraphs = this.announcement.details.split('#'); вызывается раньше this.announcement = data, поэтому this.annoucement в этот момент не определено.

Чтобы быть уверенным, что оба значения уже получены из наблюдаемых, вы можете использовать функцию combineLatest или оператор switchMap .

Добавление оператора ? - обходной путь. Ваша наблюдаемая все еще может вызывать с неожиданным порядком.

Например:

this.route.paramMap.pipe(switchMap((params: ParamMap) => {
  let id = parseInt(params.get('id'));
  this.announcementId = id;

  this.getAnnouncenentById(id);
  return this.announcementservice.getAnnouncementById(id)

})).subscribe((data) => {
  this.announcement = data
  this.paragraphs = this.announcement.details.split('#');
});

В этом коде подписка начнется после того, как первое наблюдаемое излучает значение.