1
votes

Angular 7 HttpClient Get Request réponse non définie

Erreur GET Request from API undefined error

Les données sont affichées mais la console affiche une erreur non définie à la ligne 46: ERREUR TypeError: impossible de lire la propriété 'detaljne' de undefined et ERREUR Contexte PostComponent.html: 46

JSON est imbriqué dans JSON-Server

{
      "id": 1,
      "detaljne": [
        {
          "name": "Marka",
          "value": "Audi"
        },
        {
          "name": "Model",
          "value": "A6"
        }
      ]
    },

HTML

XXX

post.model.ts

import { Detaljne } from "./detaljne.model";
import { Deserializable } from "./deserializable.model";

export class Post implements Deserializable {
  public id: number;
  public detaljne: Detaljne[];

  deserialize(input: any): this {
    Object.assign(this, input);
    this.detaljne = input.detaljne.map(detaljne =>
      new Detaljne().deserialize(detaljne)
    );
    return this;
  }
}

JSON

<div *ngFor="let detaljne of post.detaljne" class="row-info">
   <p>{{ detaljne.name }}</p>
   <p>{{ detaljne.value }}</p>
</div>

angular rest angular-httpclient

3 commentaires

Essayez d'utiliser post? .Detaljne dans le ngFor pour voir si cela fonctionne

J'ai déjà essayé mais pas utile

Essayez de fournir une démonstration pour reproduire votre erreur.

3 Réponses :

2
votes

Vous essayez d'accéder à une propriété de post dans votre * ngFor , mais vous ne vérifiez pas si post lui-même existe encore. Pour résoudre ce problème, vous pouvez utiliser *ngIf

L'utilisation de * ngIf = "post" ne rendra pas l'élément HTML tant que l'article n'est pas défini.

<ng-container *ngIf="post">
  <div *ngFor="let detaljne of post.detaljne" class="row-info">
      <p>{{ detaljne.name }}</p>
      <p>{{ detaljne.value }}</p>
  </div>
</ng-container>

Remarque: Vous ne pouvez pas utiliser * ngFor et * ngIf sur le même élément, donc vous utilisez qui est juste un 'wrapper' qui ne créera pas d'élément réel sur le DOM.

Alternativement, il y a l'opérateur de navigation sécurisé ? , ce qui est légèrement différent car c'est comme faire post! == null? product.detaljne: null . Les deux options sont valides, il suffit de choisir celle qui convient le mieux :)

6 commentaires

Au lieu d'ajouter une couche supplémentaire de * ngIf . Il doit être résolu avec opérateur de navigation sécurisée (?.)

L'erreur est partie! Merci @Jojofoulk! Pouvez-vous me dire quelque chose à propos de cette erreur juste pour savoir pour l'avenir?

Mettez à jour la réponse pour expliquer ce qui se passait :)

Aha, maintenant c'est plus clair pour moi ... merci encore @Jojofoulk

@Jojofoulk: l'ajout d'une couche supplémentaire de * ngIf n'est pas nécessaire, voir ma réponse.

J'ai mis à jour mon commentaire et abordé ce point. Les deux approches diffèrent légèrement mais elles sont toutes deux valables.

0
votes

Cela devrait suffire, vous n'avez pas besoin d'ajouter une couche supplémentaire de *ngIf:

post = null;

Voir cette démo fonctionnelle:

https : //stackblitz.com/edit/ngfor-example-7ipt7m? file = app / app.component.ts

Result:

remplacez simplement:

post = {
  "id": 1,
  "fetchData": [
    {
      "name": "Marka",
      "value": "Audi"
    },
    {
      "name": "Model",
      "value": "A6"
    }
  ]
};

Par:

<div *ngFor = "let detaljne of post?.fetchData">
  <p>{{ detaljne.name }}</p>
  <p>{{ detaljne.value }}</p>
</div>

0 commentaires

0
votes

La raison est qu'il faut un certain temps pour obtenir la réponse. Utilisez donc les promesses pour retarder le chargement des données.

this._customerService.getCustomers().subscribe(data => this.customers = data);

utilisez ceci sous les promesses.

0 commentaires