Dev Faq
0
votes

ne peut pas lire la propriété du numéro de 6 * NGIF angulaire non défini

dans mon fichier angulaire 6 applications .html J'ai un code comme ci-dessous xxx pre>

et in .ts, j'ai le code ci-dessous: p> 

<div *ngIf="values.signers">
<div *ngIf="checkForStatus()" class="row">
             .......
    </div>
</div>

3 commentaires

Pouvez-vous consoler les valeurs et voir ce qui est à l'intérieur?

Il s'agit de valeurs de retour, ce n'est pas un problème, mon petit sentiment dit que le modèle est rendu avant la fin du code TS.

Sur Ngonchanges Crochet de LifeCycle Vérifiez le @input Valeur si elle est attribuée à la charge initiale ou il faut du temps? Si cela prend du temps, ajoutez une condition là-bas et créez une variable dans votre TS. Utilisez la même chose dans votre html

4 Réponses :

0
votes

Il semble que valeurs forte> est indéfini. Dans le modèle, vous pouvez empêcher cette erreur de la sorte: 

checkForStatus() {
  if(this.values) {
    // here values property is defined
  }
}

8 commentaires

Marek, j'ai déjà fait ce tour, comme vous pouvez le voir dans mon code lorsque j'utilise

Cela résoudra cette erreur et mais cela n'aide pas si je fais la même chose dans le fichier TS comme vous mentionné.

@ user12925068, vous avez également ajouté si relève de la méthode?

Donc, dans quel endroit spécifique dans votre code, vous obtenez cette erreur?

ça fonctionne bien, mais dans la console, je reçois une erreur dans la console d'indéfinie

"Erreur dans la console d'indéfinie" - mais dans quelle ligne? et quel fichier? ts? HTML?

Dans le fichier HTML, il fait ce qu'il suppose que cela signifie, mais à cause du comportement asynchrone, il n'a pas pu être chargé à la première fois.

Avez-vous utilisé l'opérateur de chaînage optionnel dans le modèle (fichier HTML)? valeurs? .Signers - Cela devrait empêcher cette erreur, comme si j'ai écrit dans ma réponse

OK, pourriez-vous mettre à jour votre question avec des fichiers TS et HTML entiers?

0
votes

Le problème semble être que ceci.values ​​ code> n'est pas défini dans toutes les situations. Donc, lorsque vous jetez un coup d'œil à votre code, lorsque vous initialisez cela.values ​​ code>?

Je suppose qu'il est actuellement rempli de manière asynchrone (cela signifie que le parent n'a pas pu fournir la valeur au moment de la création. ). En conséquence, lorsque le composant est créé, le premier rendu se produira avant que ceci.values ​​ code> est rempli. Ensuite, quelques millisecondes plus tard, la valeur est assignée.
À cause de cela, la deuxième solution fonctionne et le premier pas. Dans le premier il explose, car au premier rendu, la valeur n'est pas disponible. P>

Therfor Vous avez plusieurs façons de gérer le problème. Vous pouvez essayer de combattre le symptôme et de faire une vérification si la valeur nécessaire est disponible et si elle ne renvoie pas une valeur acceptable p> xxx pré>

ou vous pouvez analyser la source du problème et Vérifiez si la nature asynchrone est nécessaire. p>

Par exemple, le parent ne pouvait ajouter que le composant enfant dans le DOM lorsque chaque valeur est disponible. P> 

<childComponent [values]="this.values" *ngIf="this.values"></childComponent>

0 commentaires
0
votes

C'est parce que les propriétés de saisie sont remplies avant Ngoninit () code> est appelée. Lorsque vous y accédez à l'aide de * ngif code> IT toujours non défini code>. Donc, vous pouvez affecter une valeur à la propriété tout en le déclarant: 

@Input() values: OrderResponse = {};

4 commentaires

Pouvez-vous s'il vous plaît élaborer sur ce petit?

quand j'ai fait comme au-dessus, il dit que le type 'indéfini []' n'a pas de propriétés en commun avec le type "orderresponse"

Cela semble fonctionner ... J'ai essayé comme ça. @input () Valeurs: OrderResponse = {};

Lorsque vous déclarez "valeurs" sans y attribuer une valeur, elle évalue automatiquement à indéfini. Ensuite, lorsque vous essayez d'accéder à la variable "Valeurs" dans * ngif = "CheckforStatus ()", sa valeur ne lui a pas encore été attribuée en tant que propriété d'entrée. C'est pourquoi vous obtenez cela est égal à indéfini. Mais quand vous lui donnez quelque chose même s'il s'agit d'un objet vide, cela fonctionne bien, car il a une valeur maintenant.

0
votes

similaire à ce que Omar Mohamed a suggéré, mais j'ai utilisé {} code> à la place. 

@Input() values: OrderResponse = {};

1 commentaires

Je pense que ce n'est pas la meilleure solution, car il suggère que les valeurs sont facultatives. Je ne pense pas que tu voulais y arriver.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Erreur de compilation angulaire: NG6001: la classe est répertoriée dans les déclarations du NgModule 'AppModule', mais n'est pas une directive, un composant ou un tube
erreur NG6002: apparaît dans le NgModule.imports d'AppModule, mais n'a pas pu être résolu en une classe NgModule
[ng update]: Erreur - Le package "@ angular-devkit / schematics" ne peut pas être résolu à partir du répertoire racine de l'espace de travail