3
votes

J'ai eu une erreur avec une variable non définie quand afficher

J'ai eu l'erreur Erreur: _co.bellowContent n'est pas défini quand afficher les données. Vous pouvez consulter mon code ci-dessous. J'ai eu une erreur Erreur: _co.bellowContent est indéfini quand afficher les données. Vous pouvez consulter mon code ci-dessous.

app.component.html

  bellowContent:undefined
  table = [
  {
    "id": 1,
    "first":"Robin",
    "last": "William",
    "title": "back end developer"
  },{
    "id": 2,
    "first":"Mark",
    "last": "Thornton",
    "title": "front end developer"
  },{
    "id": 3,
    "first":"Tary",
    "last": "Huction",
    "title": "front end developer"
  }
]


  open(tableRow) {
      this.bellowContent = tableRow
  }
}

app.component.ts

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Title</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let tableRow of table" (click)="open(tableRow)">
      <th scope="row">{{tableRow.id}}</th>
      <td>{{tableRow.first}}</td>
      <td>{{tableRow.last}}</td>
      <td>{{tableRow.title}}</td>
    </tr>
  </tbody>
</table>

<div>
<p>id: {{ bellowContent.id }}</p>
<p>first: {{ bellowContent.first }}</p>
<p>last: {{ bellowContent.last }}</p>
<p>title: {{ bellowContent.title }}</p>
</div>

Voici mon code dans stackBlitz

typescript angular

4 commentaires

mec pourquoi vous supprimez la réponse?

non ... je ne suis pas supprimé réponse ..

maintenant il est en position maquillée ou enlevée

ok .. j'ai marqué en retour ...

4 Réponses :

1
votes

Puisque vous le définissez comme indéfini, il sera indéfini en premier lieu, afin de gérer l'erreur non définie. Utilisez l'opérateur Safe Navigation comme suit,

 bellowContent = {};

Également une manière appropriée d'initialiser le bellowContent en tant qu'objet vide

<p>id: {{ bellowContent?.id }}</p>
<p>first: {{ bellowContent?.first }}</p>
<p>first: {{ bellowContent?.last }}</p>
<p>first: {{ bellowContent?.title }}</p>

STACKBLITZ DEMO

0 commentaires

1
votes

Initialisez bellowContent sur un objet vide {} plutôt que non défini:

<div *ngIf="bellowContent">
   ...
</div>

Après une étude plus approfondie de votre code, il semble qu'il ne soit pas souhaitable d'afficher les étiquettes id, first, etc. jusqu'à ce que et à moins que l'utilisateur clique sur l'une des lignes. Dans ce cas, vous pouvez simplement envelopper le contenu que vous souhaitez afficher en utilisant

bellowContent = {};

et conserver votre initialisation initiale de bellowContent à bellowContent: undefined

1 commentaires

J'ai supprimé mon vote défavorable, mais c'est toujours un sale hack. undefined est la valeur correcte pour aucune sélection effectuée et le div doit être masqué avec un ngIf. Un objet vide est un hack.

1
votes

Ne pas garder indéfini comme type, mettre la condition * ngIf à la div

Code modifié https://stackblitz.com/edit/angular- zftsyc? file = src / app / app.component.html

0 commentaires

1
votes

Utilisez un ngIf sur le contenu essayant d'accéder aux propriétés d'un objet non défini. Cela semble plus simple que d'avoir l'opérateur de navigation sécurisé partout.

<div *ngIf="bellowContent">
<p>id: {{ bellowContent.id }}</p>
<p>first: {{ bellowContent.first }}</p>
<p>last: {{ bellowContent.last }}</p>
<p>title: {{ bellowContent.title }}</p>
</div>

0 commentaires