Wordpress API в Angular 8. ОШИБКА TypeError: "_co.item не определен"

Question

Вот моя ситуация: я работаю с Wordpress API на локальном сервере XAMMP в качестве бэкэнда с Angular 8 веб-интерфейсом. Когда я запрашиваю все сообщения, это работает, но когда я запрашиваю только один пост, чтобы показать его в компоненте, я получаю эту ошибку:

ОШИБКА TypeError: "_co.item не определен"

View_PostsDetailComponent_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>

Я не использую модель, но она выбрана работать в любом случае.

import { Component, OnInit, Input } from '@angular/core';
import { PostsService } from './../posts.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-posts-detail',
  templateUrl: './posts-detail.component.html',
  styleUrls: ['./posts-detail.component.scss']
})


export class PostsDetailComponent implements OnInit {
  item: any;
  id: number;

  constructor(private route: ActivatedRoute, public dataService: PostsService) { }
  ngOnInit() {

    this.route.url.subscribe(u => {
      this.id = this.route.snapshot.params.id;
    });

    this.dataService.getPostByID(this.id).subscribe((data: any) => {
      this.item = data;
    });
  }

Я использую этот URL для Wordpress API

wordpress / wp-json / wp / v2 / posts / [ID]? _ embed

А вот и PostService:

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;
      }
}

Большое спасибо.

Answer 1

При первой загрузке 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>