2
votes

ERREUR TypeError: impossible de lire la propriété 'propriété' non définie

Je veux ajouter des objets à un tableau d'objets.

J'ai donc créé une variable et je l'ai initialisée

[
    {
        "category": "Editorial",
        "categoryFR": "Editorial",
        "shortCategory": "Editorial",
        "shortCategoryFR": "Editorial",
        "title": "Letâ€™s go digital!",
        "titleFR": "Letâ€™s go digital!",
        "chapo": "",
        "chapoFR": "",
        "bodyStyle": false,
        "body": "",
        "bodyFR": null,
        "body2": null,
        "body2FR": null,
        "mainVideo": null,
        "mainVideoCaption": null,
        "mainVideoCredits": null,
        "readingTime": "2",
        "edition": {
            "title": "Issue 1 - December 2018",
            "slogan": "The REYL Group Collaborators' Magazine",
            "mainPicture": null,
            "position": 1,
            "status": true,
            "id": "276f5c0f-346d-4ef5-a2cb-2711f6237bbe",
            "timestamp": "AAAAAAAACAU="
        },
        "date": "December 2018",
        "dateFR": "DÃ©cembre 2018",
        "theme": null,
        "articleAuthors": null,
        "author": null,
        "position": 0,
        "pictures": null,
        "mainPicture": {
            "id": "0716a4f4-4fcb-4cd7-b00c-d3cd0fbbc313",
            "name": "14ac31ef-7818-4739-b54c-eea4974e79dcIssue01_December2018_Edito_Image_01.jpg",
            "originalName": "Issue01_December2018_Edito_Image_01.jpg",
            "status": false
        },
        "smallPicture": {
            "id": "3c98ce44-4c9f-4383-b6a9-8a4759264c29",
            "name": "e0c9d687-e3b2-438f-8c25-d020ea4f0762Issue01_December2018_Image_Rubrique_Edito.jpg",
            "originalName": "Issue01_December2018_Image_Rubrique_Edito.jpg",
            "status": false
        },
        "gallery1": null,
        "gallery2": null,
        "galleries": null,
        "mainPictureCaption": null,
        "mainPictureCaptionFR": null,
        "mainPictureCredits": "Â© Adobe Stock/Vege",
        "mainPictureCreditsFR": null,
        "id": "1133f0bd-abe4-4278-9dc5-465956dc8e2d",
        "timestamp": "AAAAAAAACMQ="
    },
    {...}
]

Ensuite, j'essaye d'ajouter des objets à venir depuis un service

loadArticles(editionId) {
  this.articlesService.articlesGetArticlesForEdition(editionId).subscribe(articles => {
    console.log(articles);
    articles.forEach(function (article, i) {
      console.log(article);
      this.articles.push(article);
    });
    console.log(this.articles);
  });
}

Le problème se produit lorsque j'essaye de pousser un objet dans mon Array: this.articles.push (article); p>

Lorsque je fais cela, je reçois une erreur:

core.js: 15723 ERROR TypeError: Impossible de lire la propriété 'articles' de indéfini

Le JSON renvoyé par le service Web, ressemble à ça

articles: {}[] = [];

typescript angular arrays

2 commentaires

changez-le simplement en articles: [] = [];

@JoelJoseph, j'ai essayé mais je n'ai rien changé

3 Réponses :

5
votes

La fonction de rappel que vous transmettez à articles.forEach est une fonction normale.

Vous devez passer une fonction de flèche ( () => {} ) au lieu de conserver le contexte de this.

Remplacez ceci:

loadArticles(editionId) {
  this.articlesService.articlesGetArticlesForEdition(editionId)
    .subscribe(articles => {
      console.log(articles);
      articles.forEach((article, i) => {
        console.log(article);
        this.articles.push(article);
      });
      console.log(this.articles);
    });
}

par ceci:

loadArticles(editionId) {
  this.articlesService.articlesGetArticlesForEdition(editionId)
    .subscribe(articles => {
      console.log(articles);
      articles.forEach(function(article, i) {
        console.log(article);
        this.articles.push(article);
      });
      console.log(this.articles);
    });
}

2 commentaires

Ouais ça marche, merci pour l'explication! (il faut attendre 5 minutes pour accepter votre réponse)

@ 118218 oh je vois que c'est la bonne réponse, jusqu'à ce que la fonction de flèche chaque nouvelle fonction JavaScript définisse sa propre valeur this

2
votes

lorsque vous utilisez la fonction ce n'est pas connu dans la fonction donc this.articles n'est pas défini, essayez d'utiliser la fonction de flèche:

articles.forEach((article, i)=> {
      console.log(article);
      this.articles.push(article);
    });

1 commentaires

@ 118218 lisez la section Manipulation de cette mdbootstrap.com / education / angular / typescript-9-arrow-functio‌ ns . aidera à comprendre ce et les fonctions fléchées.

1
votes

Vous pouvez simplement attribuer une réponse au tableau sur une seule ligne plutôt que sur une boucle:

Service.articlesGetArticlesForEdition(editionId).subscribe(articles => 
{
   for (let art of articles) {
     this.articles.push(art);
   }
}

puis

articles: any[] = [];

1 commentaires

Non, en fait, je souhaite appliquer certains filtres et ne pas attribuer toute la réponse.