Error message: "Trying to assign a value to a property that is not defined in Angular

Question

Error message: "Trying to assign a value to a property that is not defined in Angular

I am encountering an issue while trying to set the reviews for an Angular 2 project. When I try to assign a value to this.reviews = targ, I receive an error message: TypeError: Cannot set property 'reviews' of undefined. However, I know that targ exists because I can successfully print it to the console. Any thoughts on why this might be happening?

import { ReviewService } from '../review.service';
import { Review } from '../review/review.component'
import { Component} from '@angular/core';
import {  OnInit } from '@angular/core';

@Component({
  selector: 'review-list',
  templateUrl: './review-list.component.html',
  styleUrls: ['./review-list.component.css'],
  providers: [ReviewService] //for the injector to be able to inject ReviewerService
})

export class ReviewListComponent implements OnInit {
   public reviews: Review[];

  constructor(private reviewService: ReviewService) {
    this.reviews = [] ;
  }


  initializeReviews(): void {
     this.reviewService.getReviews().then(
        this.set    
     ).catch(function(reason){
        console.log(reason);
     });

  }  



  set(targ):void {
    console.log(targ);
    this.reviews = targ;

  }

  ngOnInit(): void {
    this.initializeReviews();   
    //this.reviews = this.reviewService.get();
  }

}

angular typescript

Answer 1

Answer №1

When passing method references, the default behavior does not keep this pointing to the current class instance. To ensure that .this points to the correct class instance, you can use .bind(this) or arrow functions:


initializeReviews(): void {
   this.reviewService.getReviews().then(
      this.set.bind(this) // << add `.bind(this)` or
      // (val) => this.set(val)    
   ).catch(function(reason){
      console.log(reason);
   });
}

Answer 2

When passing method references, the default behavior does not keep this pointing to the current class instance. To ensure that .this points to the correct class instance, you can use .bind(this) or arrow functions:


initializeReviews(): void {
   this.reviewService.getReviews().then(
      this.set.bind(this) // << add `.bind(this)` or
      // (val) => this.set(val)    
   ).catch(function(reason){
      console.log(reason);
   });
}

Answer 3

Answer №2

If you pass the method like that to the promise, you risk losing the context of 'this'. To avoid this issue, make sure to either wrap the method in an anonymous function or bind the correct context.

initializeReviews(): void {
   this.reviewService.getReviews().then((response) => {
       this.set(response);
   })
   .catch((reason) => {
    console.log(reason);
   });
}

Alternatively, you can use

this.reviewService.getReviews().then(this.set.bind(this))

to maintain the proper context.

It’s important to note that using the function keyword inside a TypeScript class can also lead to loss of the 'this' context.

Answer 4

If you pass the method like that to the promise, you risk losing the context of 'this'. To avoid this issue, make sure to either wrap the method in an anonymous function or bind the correct context.

initializeReviews(): void {
   this.reviewService.getReviews().then((response) => {
       this.set(response);
   })
   .catch((reason) => {
    console.log(reason);
   });
}

Alternatively, you can use

this.reviewService.getReviews().then(this.set.bind(this))

to maintain the proper context.

It’s important to note that using the function keyword inside a TypeScript class can also lead to loss of the 'this' context.

Error message: "Trying to assign a value to a property that is not defined in Angular

Answer №1

Answer №2

Similar questions

Updating components in Angular4 when route changesHow to update components on route

When running the command "ng build --prod" in Angular 5, you may encounter an error stating

Using TypeScript to conditionally type input arrays

Utilizing the adapter design pattern in Angular with TypeScript for enhancing a reactive form implementation

The "isActive" value does not share any properties with the type 'Properties<string | number, string & {}>'. This issue was encountered while using React with TypeScript

The function res.status is not defined

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

What causes React JS to continuously render in an infinite loop when using hooks and useState

What is the best way to correctly link each object from a for loop to its corresponding DOM element?

What is the process for invoking an External Javascript Firestore function within a Typescript file?

Issue with modal-embedded React text input not functioning properly

What is the process for determining a variable's type programmatically and then utilizing it as the type for a function parameter?

Populating datasets with relative indexing

Unable to grab hold of specific child element within parent DOM element

How can I invoke the header component function in another component using Angular 2?

The inRequestScope feature seems to be malfunctioning and is not functioning as intended

Tips for accurately implementing the onHoverIn TS type in the React Native Web Pressable component

Enhance Ng2-smart-table with a custom rendering component

A guide to positioning the content of an Angular tag within a span element

Angular: a technique for creating customized error messages and modifying fields