CODEWITHSUNDEEP
angular
Aleksandr Popov
Aleksandr Popov

Reputation: 520

Angular: cannot read property '_id' of undefined

Could anyone suggest why I'm getting error in Angular 7 while application working

ERROR TypeError: Cannot read property '_id' of undefined

It does pointing on component:

<app-positions-form
  *ngIf="!isNew"
  [categoryId]="category._id">
</app-positions-form>

but before that I have:

  <div>
    {{category._id}}
  </div>

which displaying value correctly.

In my component I have:

export class CategoriesFormComponent implements OnInit {

  @ViewChild('input') inputRef: ElementRef;
  form: FormGroup;
  image: File;
  imagePreview;
  isNew = true;
  category: Category;

  constructor(private route: ActivatedRoute,
              private categoriesService: CategoriesService,
              private router: Router) { }

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl(null, Validators.required)
    });

    this.form.disable();

    this.route.params.pipe(
      switchMap(
        (params: Params) => {
          if(params['id']) {
            this.isNew = false;
            return this.categoriesService.getById(params['id'])
          }

          // of returns Observable from anything
          return of(null)
        }
      )
    ).subscribe(
      category => {
        if(category) {
          this.category = category;

          this.form.patchValue({
            name: category.name
          });

          this.imagePreview = category.imageSrc;
          MaterialService.updateTextInputs()
        }
        this.form.enable();
      },
      error => MaterialService.toast(error.error.message)
    )
  }
...

I already tries to set question mark to after variable(i.e. category?) that led to component not loaded correctly.

Key point here that my app is working as expected however I'm getting this error which quite strange.

Could anyone advise me what is wrong here? Thank you, in advance!

Upvotes: 0

Views: 1245

Answers (1)

Ganesh
Ganesh

Reputation: 6016

@Aleksandr Popov set isNew to false when you get the category object. currently you are setting this before you get category object. That's why your getting error.

 this.route.params.pipe(
      switchMap(
        (params: Params) => {
          if(params['id']) {
            //this.isNew = false;              <-- remove this line here
            return this.categoriesService.getById(params['id'])
          }

          // of returns Observable from anything
          return of(null)
        }
      )
    ).subscribe(
      category => {
        if(category) {
          this.category = category;
          this.isNew = false;    <- set to false here 
          this.form.patchValue({
            name: category.name
          });

          this.imagePreview = category.imageSrc;
          MaterialService.updateTextInputs()
        }
        this.form.enable();
      },
      error => MaterialService.toast(error.error.message)
    )
  }

In your child component set a question mark

<div>
    {{category?._id}}
  </div>

I hope this will solve your issue :)

Upvotes: 1

Related Questions