javascript - cannot read property of undefined angular 7 - Stack Overflow

admin管理员组

文章数量:1292967

I am getting many errors at the dev tools console when adding a service into my ponent but the code still working but I want to get rid of from these errors

This's the service:

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

This is the ponent:

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, "");
  }

}

What cause the errors is the getContent() method! it says that is the .rendered is an undefined property but it doses defined on the API!

I have searched on that problem and most of the solutions I found it's about using the symbol ? at HTML template but I can't use that in the ponent itself.

I am getting many errors at the dev tools console when adding a service into my ponent but the code still working but I want to get rid of from these errors

This's the service:

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

This is the ponent:

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, "");
  }

}

What cause the errors is the getContent() method! it says that is the .rendered is an undefined property but it doses defined on the API!

I have searched on that problem and most of the solutions I found it's about using the symbol ? at HTML template but I can't use that in the ponent itself.

• javascript
• angular
• ionic-framework
• angular7

Share Improve this question Follow edited Nov 28, 2018 at 9:53 Gonçalo Peres 13.6k55 gold badges6969 silver badges9494 bronze badges asked Nov 26, 2018 at 17:47 hesham shawkyhesham shawky 1,15166 gold badges2222 silver badges4848 bronze badges 3

• Can you please create a minimum reproduction on stackblitz ? – Sachin Gupta Commented Nov 26, 2018 at 17:49
• When you want to change some content or modify it use pipes.See the folowing discussion on stackoverflow stackoverflow./questions/42693244/… Official angular guide:angular.io/guide/pipes – itwolfpower Commented Nov 26, 2018 at 17:54
• You need to share where exactly you are calling getContent() and attempting to use pageContent. – Alexander Staroselsky Commented Nov 26, 2018 at 17:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you are calling getContent() in the HTML/template, you can most likely avoid this error by either:

Making pageContent initially null and using *ngIf to only display the content once it has asynchronously resolved:

Component:

public pageContent: any = null;

Template:

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

Or you could instead RxJS operators such as map() and the async pipe:

Component:

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, ""))
      );
  }
}

Template:

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

That being said, you should probably have additional checks to ensure each sub-property is available prior to accessing it, but usually this type of error is because you are attempting to access the contents before they have resolved.

Hopefully that helps!

Yes, you cannot use ? Elvis (Safe navigation) operator in the ponent itself because it is designed for view part only.

But you can add some check in the ponent too to avoid such errors like -

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

.rendered is an undefined property

Also, This error may produce you have defined pageContent = {} so on {} neither content nor rendered exist , may be that is also the reason to exist such errors.

Angular remend to strongly typecast your data before use.

本文标签： javascriptcannot read property of undefined angular 7Stack Overflow