не может прочитать свойство неопределенного угла 7

Question

Я получаю много ошибок на консоли инструментов разработчика при добавлении службы в мой компонент, но код все еще работает, но я хочу избавиться от этих ошибок

Это служба:

 getPagesData(pageSlug: string): Observable<any[]> {
    return this._http.get<any[]>(`${environment.apiUrl}wp/v2/pages/?slug=${pageSlug}`);
  }

Это компонент:

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';

@Component({
  selector: 'app-membership',
  templateUrl: './membership.page.html',
  styleUrls: ['./membership.page.scss'],
})
export class MembershipPage implements OnInit {


  public pageContent: any = {};
  public content: string;

  constructor(
    private _data: DataService
  ) { }

  ngOnInit() {
    this._data.getPagesData('memberships')
      .subscribe(
        page => this.pageContent = page[0]
      )
  }

  getContent(): string {
    return this.pageContent.content.rendered.replace(/\[(.+?)\]/g, "");
  }

}

Причиной ошибок является метод getContent () !в нем говорится, что .rendered - неопределенное свойство, но оно определено в API!

Я искал эту проблему и большинство решений, которые я нашел, касается использования символа ? в шаблоне HTML, но я не могу использовать его в самом компоненте.

Answer 1

Если вы вызываете getContent() в HTML / шаблоне, вы, скорее всего, можете избежать этой ошибки:

Создание pageContent изначально null и использование *ngIf только для отображения содержимогопосле асинхронного разрешения:

Компонент:

public pageContent: any = null;

Шаблон:

<div *ngIf="pageContent">{{getContent()}}</div>

Или вы можете вместо этогоОператоры RxJS, такие как map() и async pipe:

Компонент:

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-membership',
  templateUrl: './membership.page.html',
  styleUrls: ['./membership.page.scss'],
})
export class MembershipPage implements OnInit {
  public pageContent: Observable<string>;
  public content: string;

  constructor(private _data: DataService) { }

  ngOnInit() {
    this.pageContent = this._data.getPagesData('memberships')
      .pipe(
        map(page => page[0].content.rendered.replace(/\[(.+?)\]/g, ""))
      );
  }
}

Шаблон:

<div>{{pageContent | async}}</div>

При этом вам, вероятно, следует провести дополнительные проверки, чтобы убедиться, что каждое подчиненное свойство доступно до доступа к нему, но обычно этот тип ошибки возникает из-за того, что вы пытаетесь получить доступ к содержимому до его разрешения.

Надеюсь, это поможет!

Answer 2

Да, вы не можете использовать ? оператор Элвиса (Безопасная навигация) в самом компоненте, потому что он предназначен только для просмотра части.

Но вы также можете добавить некоторую проверку в компонент, чтобы избежать таких ошибок, как -

getContent(): string {
    const dataToReturn = this.pageContent && this.pageContent.content && this.pageContent.content.rendered.replace(/\[(.+?)\]/g, "");
    return dataToReturn
  }

.rendered - неопределенное свойство

Также, Эта ошибка может привести к тому, что вы определили pageContent = {}, поэтому {} не существует ни content, ни rendered, возможно, это также является причиной существования таких ошибок.

Angular рекомендует строго типизировать вашданные перед использованием.