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

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

但是您也可以在组件中添加一些检查，以避免-

之类的错误。

.rendered是未定义的属性

此外，此错误可能会导致您已经定义了getContent(): string { const dataToReturn = this.pageContent && this.pageContent.content && this.pageContent.content.rendered.replace(/\[(.+?)\]/g, ""); return dataToReturn }，因此在pageContent = {}和{}都不存在的情况下，也许这也是存在此类错误的原因。

Angular建议在使用之前强烈改型您的数据。

Answer 2

如果您在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>

话虽这么说，您可能应该进行其他检查，以确保每个子属性在访问之前都是可用的，但是通常这种类型的错误是因为您试图在未解决其内容之前对其进行访问。

希望有帮助！

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

2 个答案: