The absence of a function implementation right after the declaration within a TypeScript class is a common issue that needs

Question

The absence of a function implementation right after the declaration within a TypeScript class is a common issue that needs

I received a handwritten array to populate a table for my class, however I am now fetching this array's content from a JSON during the ngOnInit phase and it is not structured in the way I require.

Therefore, I am attempting to create a function that will update the table array with this new data retrieved during the ngOnInit phase.

The problem arises when I attempt to write code outside of a function in my Typescript class, as I encounter an error stating "Function implementation is missing or not immediately following the declaration".

What could be causing this issue and how can I resolve it?

Typescript

export class MyComponent implements OnInit {
    users: Object;

    constructor(private tstService: MyComponentService) { 
        this.source = new LocalDataSource(this.data);
    }

    ngOnInit(): void {
        this.tstService.getTstWithObservable()
            .map(result => result.map(i => i.user.data))
            .subscribe(
                res => { this.users = res; }
            );
    
    console.log(this.users); // This line is just an example. It throws 'Function implementation is missing or not immediately following the declaration'

    data = [
        {
          title: 'Monthly',
          sdate: '01/04/1990',
          edate: '30/09/1990',
        },
      ];

    source: LocalDataSource;
}

angular function typescript class declaration

Answer 1

Answer №1

One issue to note is that the code snippet "console.log(this.users);" is placed outside of an "executable area," such as within the ngOnInit method.

If you wish to view the data in the devtools using console.log(this.users);, it is recommended to move this part inside the ngOnInit or perhaps within the constructor.

An example implementation could look like this:

ngOnInit(): void {
    this.tstService.getTstWithObservable()
    .map(result => result.map(i => i.user.data))
    .subscribe(
       res => {
                this.users = res;
                console.log(this.users); // <-- now located here!
       }
   );
}

The key point is that any code intended for execution should be placed within a method that Angular will run.

For more examples and details, refer to this demo. A snippet from the relevant code is provided below:

export class AppComponent  implements OnInit{
  name = 'Angular 6';

  constructor() {
    console.log(name); // No issues
  }

  ngOnInit() {
    console.log('Sample without errors'); // No issues
  }

  // If the line below is uncommented, an error will occur
  console.log(name); // You will see: Function implementation is missing or not immediately following the declaration
}

Answer 2

One issue to note is that the code snippet "console.log(this.users);" is placed outside of an "executable area," such as within the ngOnInit method.

If you wish to view the data in the devtools using console.log(this.users);, it is recommended to move this part inside the ngOnInit or perhaps within the constructor.

An example implementation could look like this:

ngOnInit(): void {
    this.tstService.getTstWithObservable()
    .map(result => result.map(i => i.user.data))
    .subscribe(
       res => {
                this.users = res;
                console.log(this.users); // <-- now located here!
       }
   );
}

The key point is that any code intended for execution should be placed within a method that Angular will run.

For more examples and details, refer to this demo. A snippet from the relevant code is provided below:

export class AppComponent  implements OnInit{
  name = 'Angular 6';

  constructor() {
    console.log(name); // No issues
  }

  ngOnInit() {
    console.log('Sample without errors'); // No issues
  }

  // If the line below is uncommented, an error will occur
  console.log(name); // You will see: Function implementation is missing or not immediately following the declaration
}

The absence of a function implementation right after the declaration within a TypeScript class is a common issue that needs

Answer №1

Similar questions

Accessing Github REST API with Next-auth token

Can't figure out why the BackgroundImage URL from process.env isn't appearing on my website

Encountering Error 404 while submitting a form on Prisma, Axios, and NestJS

Implementing dynamic progress bar updates in an Angular application using Bootstrap

The functionality of Angular material input fields is compromised when the css backface property is applied

Issue with setInterval function execution within an Angular for loop

Change the type declaration of a list of elements to a list containing those elements organized within a container - Array<Wrapper<T>>

How to Show Concealed Text in Material UI Multiline TextField and Obtain Unveiled Text

Attach an event listener to a particular textarea element

Show varying mat-options based on the selected value of another mat-select

What causes the error message saying 'undefined' cannot be assigned to the specified type ...?

The error in Angular 6 is that the property 'controls' is not available on the type 'AbstractControl'

Error: No routes found for 'documents' in Angular 2 RC5

Issue with readonly is preventing the ability to alter the font color of the input

Navigating through concealed pathways

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

Access to Angular 7 granted through Gmail authentication

Implementing TypeScript in an Asp.net Core ReactJS application`s configuration

Enhance the step implementation in Cucumber-js

Combining multiple arrays of objects using multiple keys with Angular 9 and Typescript