错误类型错误：无法读取未定义的属性“详细信息”

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.announcement = data所以 this.annoucement 在那一刻是未定义的。

为了确保两个值都已经来自可观察对象，您可以使用combineLatest函数或switchMap运算符。

添加? 运营商是解决方法。 您的 observable 仍然可以以意外的顺序调用。

例如：

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('#');
});

在该代码中，订阅将在第一个 observable 发出值后开始。