web-dev-qa-db-fra.com

L'implémentation de la fonction est manquante ou ne suit pas immédiatement la déclaration, classe TypeScript

J'ai un tableau manuscrit pour remplir une table dans ma classe, maintenant j'obtiens le contenu de ce tableau à partir d'un JSON sur ngOnInit mais il n'est pas structuré comme j'ai besoin.

J'essaie donc d'écrire une fonction pour remplir le tableau de la table avec cette nouvelle que j'obtiens sur ngOnInit.

Le problème est que lorsque j'écris du code en dehors d'une fonction dans ma classe TS, j'obtiens cette erreur "L'implémentation de la fonction est manquante ou ne suit pas immédiatement la déclaration".

Pourquoi cela et que peut-on faire pour résoudre ce problème?

TS

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); // Here, just an example. Throws 'Function implementation is missing or not immediately following the declaration'

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

    source: LocalDataSource;
}
angularfunctiontypescriptclassdeclaration
4
prevox

Le problème ici est que vous avez une "exécution de code" (console.log(this.users);) en dehors d'une "zone exécutable" (par exemple la "zone" à l'intérieur du ngOnInit).

Si vous devez faire console.log(this.users); pour voir les données dans les devtools, vous devez déplacer le console.log partie à l'intérieur du ngOnInit qui est une partie exécutable de votre classe MyComponent ou peut-être à l'intérieur du constructor.

Je vous recommanderais de le faire comme ceci:

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

Le fait est que le code que vous essayez d'exécuter doit être dans une méthode qui s'exécute Angular.

Voir cette démo avec quelques exemples. Le code correspondant est ci-dessous:

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

  constructor() {
    console.log(name); // OK
  }

  ngOnInit() {
    console.log('sample not giving error'); // OK
  }

 // comment line below and the error will go away
  console.log(name); // this will throw: Function implementation is missing or not immediately following the declaration
}
6
lealceldeiro