[英]cannot read property of undefined angular 7
在我的组件中添加服务时,我在开发工具控制台上遇到了很多错误,但代码仍在工作,但我想摆脱这些错误
这是服务:
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模板,但我不能在组件本身使用它。
是的,你不能用?
Elvis(安全导航)操作员在组件本身,因为它仅为视图部件设计。
但你也可以在组件中添加一些检查,以避免像 -
getContent(): string {
const dataToReturn = this.pageContent && this.pageContent.content && this.pageContent.content.rendered.replace(/\[(.+?)\]/g, "");
return dataToReturn
}
.rendered是一个未定义的属性
此外,此错误可能会导致您已定义pageContent = {}
因此{}
既不存在content
也不存在rendered
,也可能是存在此类错误的原因。
Angular建议在使用前强烈地对数据进行类型转换。
如果您在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>
话虽这么说,您可能应该进行额外的检查以确保每个子属性在访问之前都可用,但通常这种类型的错误是因为您在解析之前尝试访问这些内容。
希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.