無法讀取未定義角度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

是的，你不能用? Elvis（安全導航）操作員在組件本身，因為它僅為視圖部件設計。

但你也可以在組件中添加一些檢查，以避免像 -

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

.rendered是一個未定義的屬性

此外，此錯誤可能會導致您已定義pageContent = {}因此{}既不存在content也不存在rendered ，也可能是存在此類錯誤的原因。

Angular建議在使用前強烈地對數據進行類型轉換。

Answer 2

如果您在HTML /模板中調用getContent() ，則很可能通過以下任一方式避免此錯誤：

使pageContent最初為null並使用*ngIf僅在異步解析時顯示內容：

零件：

public pageContent: any = null;

模板：

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

或者您可以使用map()和async管道等RxJS運算符：

零件：

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>

話雖這么說，您可能應該進行額外的檢查以確保每個子屬性在訪問之前都可用，但通常這種類型的錯誤是因為您在解析之前嘗試訪問這些內容。

希望這有幫助！