Cannot read property 'map' of undefined while in ngOnInit

Cannot read property 'map' of undefined while in ngOnInit

By : Erdi Çilliyüz
Date : September 18 2020, 10:00 PM
I wish this helpful for you The issue is, that when you try to access this.themes.map in line const themesIds = this.themes.map(({ id }) => id);. You don't know if the async information is there already: this.themeService.query(...).subscribe()
Try to access themes.map after the subscription is deffered. Like this;
code :
this.themeService.query({'subject.equals': this.subject.id}).subscribe(
    (res: HttpResponse<ITheme[]>) => { 
    this.themes = res.body;
    const themesIds = this.themes.map(({ id }) => id); // at this point we are sure, that this.themes is there
    (res: HttpErrorResponse) => this.onError(res.message));

Share : facebook icon twitter icon
Angular 2 Constructor ngOnInit undefined property TypeScript

Angular 2 Constructor ngOnInit undefined property TypeScript

By : Kianzyk
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , This is because this does not refer the component itself. Either bind the function or use fat arrow => function:
code :
...getUserProfile().on('value', function(snap){
...getUserProfile().on('value', snap => {
  // this is properly bound here
Cannot read property of undefined 'ngOnInit' 'getData'-Angular-Unit testing-jasmine

Cannot read property of undefined 'ngOnInit' 'getData'-Angular-Unit testing-jasmine

By : Parvizsho Aminov
Date : March 29 2020, 07:55 AM
it should still fix some issue You're completely going the wrong way about testing your code.
Your TestBed configuration must not be nested in a describe block that other describe blocks cannot access When using a mock service use the term useClass: instead of useValue: There is no need to spyOn the service method when you are mocking out your service Instead of testing your ngOnInit test your getData method to make sure it sets the data attribute on your component correctly. This is because you don't know when ngOnInit has finished running your asynchronous code As getData is asynchronous pass the done() callback into your it block this will allow you to notify the test when asynchronous code should be completed
code :
class MockMyService {
  public data: Data[];
  public getData(): Observable<Data[]> {
    this.data = results;
    return Observable.of(this.data);

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let dataService: DataService;

  beforeEach(() => {
      declarations: [HomeComponent],
      providers: [
          provide: DataService,
          useClass: MockMyService
      imports: [HttpClientModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    dataService = TestBed.get(DataService);

  describe('Given the component is loaded', () => {
    describe('When getData returns mock data', () => {
      it('Then the data attribute has a length of 2', (done) => {
        dataService.getData().subscribe(() => {
Cannot read property 'id' of undefined on ngOnInit() Angular7

Cannot read property 'id' of undefined on ngOnInit() Angular7

By : Andrew Lukin
Date : March 29 2020, 07:55 AM
wish of those help Here EmployeeComponent is your mat dialog component to open so you need to provide data to the dialog using below in your constructor of EmployeeComponent
code :
@Inject(MAT_DIALOG_DATA) data)){}
  onEdit(emp: Employee) {
      dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.width = "50%";
      // Provide your data here      
      dialogConfig.data = emp;

      this.dialog.open(EmployeeComponent, dialogConfig);
ngOnInit() {
if (form != null)
Why is @Input property undefined in ngOnInit?

Why is @Input property undefined in ngOnInit?

By : user3593199
Date : March 29 2020, 07:55 AM
it should still fix some issue In this component I use a service to get some data from an API , You can delay creation of the component until the value is ready.
code :
<app-question *ngIf="question" [question]="question"></app-question>
 this.question$ = this.route.params.pipe(
      switchMap(({requestId) => this.questionService.getQuestion(requestId))
<app-question *ngIf="question$ | async as question" [question]="question"></app-question>
@Input Complex object, initialized through ngOnInit, throwing error Cannot Read Property of undefined

@Input Complex object, initialized through ngOnInit, throwing error Cannot Read Property of undefined

By : sujitha
Date : March 29 2020, 07:55 AM
I wish this help you You should not access @Input() parameters in OnInit but in OnChanges instead. Its an Observable and there is no guarantee it will resolve till the moment OnInit fires.
For details, take a look here: Angular 2/4 @Input only moves intrinsics - not lists or objects
Related Posts Related Posts :
  • How to update all ionic cordova plugin at one command in Ionic-V4
  • How to give dynamics values for [routerLink] which it corresponds to values of an array?
  • Add and delete item from an array
  • How to unit test a button within an ngfor
  • How to launch a method after a cell value has been edited in ag-grid?
  • Can't select individual user accounts when creating a new Asp.Net Core 2.1 Angular project in Visual Studio 2019
  • How do I get the response code in angular 7
  • Angular PrimeNg: p-table not detected using @ViewChild
  • How to route within the tab component in ionic
  • How can i combine data from two API's into datasource
  • Find the last index from the array using ngFor
  • ngSelect always return undefined
  • Nested Forms in Angular Material Stepper trigger a ExpressionChangedAfterItHasBeenCheckedError
  • Angular library dependency exposure
  • Handling errors with RxJS and Angular async pipe
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • How to disable the drag option on Angular material Slide toggle component
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How can i get the selected value in ion-alert radio alert
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk