无法读取未定义角度 7 的属性答案

【问题标题】：cannot read property of undefined angular 7无法读取未定义角度 7 的属性
【发布时间】：2019-04-28 09:57:15
【问题描述】：

在我的组件中添加服务时，我在开发工具控制台上遇到了很多错误，但代码仍然有效，但我想摆脱这些错误

这是服务：

 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 模板中使用符号 ? 但我不能在组件本身中使用它。

【问题讨论】：

你能在 stackblitz 上创建一个最小复制吗？
当你想改变一些内容或修改它时使用管道。参见stackoverflow的以下讨论stackoverflow.com/questions/42693244/…官方角度指南：angular.io/guide/pipes
您需要分享您呼叫getContent() 并尝试使用pageContent 的确切位置。

标签： javascript angular ionic-framework angular7

【解决方案1】：

如果您在 HTML/模板中调用 getContent()，则很可能通过以下任一方式避免此错误：

使pageContent 初始为null 并使用*ngIf 仅在异步解析后显示内容：

组件：

public pageContent: any = null;

模板：

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

或者您也可以使用 RxJS 运算符，例如 map() 和 async 管道：

组件：

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>

话虽如此，您可能应该进行额外检查以确保在访问每个子属性之前都可用，但通常这种类型的错误是因为您试图在内容解决之前访问它们。

希望对您有所帮助！

【讨论】：

将*ngIf 添加到父元素或相同元素在这些情况下效果最佳。

【解决方案2】：

是的，您不能在组件本身中使用? Elvis（安全导航）运算符，因为它仅用于视图部分。

但您也可以在组件中添加一些检查以避免此类错误，例如 -

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

.rendered 是一个未定义的属性

另外，这个错误可能会导致你定义了pageContent = {}等等{}既不存在content也不存在rendered，可能这也是存在此类错误的原因。

Angular 建议在使用前对数据进行强类型转换。

【讨论】：