Angular WordPressAPI在第8页。错误类型错误："_co.item未定义“；

以下是我的情况：我在XAMMP本地服务器中使用Wordpress API作为后端，使用Angular 8前端。 当我请求所有帖子时，它工作正常，但当我仅请求一篇帖子时，为了将其显示到组件中，我得到了以下错误：

错误类型错误：“\u co.item未定义”

查看\u PostsDetailComponent\u 0 PostsDetailComponent.html:5

下面是PostDetailComponent.html

<app-private-nav>
    <div class="page-wrapper" id="main">
        <div fxLayout="row wrap" fxLayoutGap="16px" >
                <h1 [innerHTML]="item.title.rendered"></h1>
                <div [innerHTML]="item.content.rendered"></div>
        </div>
    </div>
</app-private-nav>

我正在为Wordpress API使用此url

wordpress/wp-json/wp/v2/posts/[ID]？\u嵌入

这是邮政服务：

export class PostsService {
     item: any;
  constructor(private http: HttpClient) { }
  
 
  getPostByID(id: number): any {
    if (this.item) {
      return of(this.item);
    } else {
      return this.http.get(ENDPOINT_URL + 'wp/v2/posts' + `/${id}` + '?_embed').pipe(map(this.processPostDataID, this));
    }
    }

  processPostDataID(data: any) {
    this.item = data;


     return this.item;
      }
}

---

非常感谢。

当HTML第一次加载时，该项没有设置为任何值-可观察对象返回该项只需要很短的时间

您可以使用

*ngIf

包装项目调用。这将阻止

“item.title.rendered”

尝试访问未定义的对象

<app-private-nav>
  <div class="page-wrapper" id="main">
    <div *ngIf="item" fxLayout="row wrap" fxLayoutGap="16px" >
      <h1 [innerHTML]="item.title.rendered"></h1>
      <div [innerHTML]="item.content.rendered"></div>
    </div>
  </div>
</app-private-nav>

您还可以使用可选链接来处理单个调用。可选的链接使在未定义或空对象上操作的表达式安全

<app-private-nav>
  <div class="page-wrapper" id="main">
    <div fxLayout="row wrap" fxLayoutGap="16px" >
      <h1 [innerHTML]="item?.title.rendered"></h1>
      <div [innerHTML]="item?.content.rendered"></div>
    </div>
  </div>
</app-private-nav>

---

太好了。在这种情况下，请设置为接受答案：）

<app-private-nav>
  <div class="page-wrapper" id="main">
    <div fxLayout="row wrap" fxLayoutGap="16px" >
      <h1 [innerHTML]="item?.title.rendered"></h1>
      <div [innerHTML]="item?.content.rendered"></div>
    </div>
  </div>
</app-private-nav>