0
votes

@Input () Pass Valeurs NULL entre les composants

Je passe une valeur d'un composant à l'autre:

paquete-setalle.component.ts strong> p> xxx pré>

paquete-retalle.component.html strong> p> xxx pré>

puis dans réserva.ts strong> J'ai ce qui suit: p>

 <div class="text-center">
    <h4>{{nombre}}</h4>
    <p>Desde: USD {{precio}} / persona</p>
 </div>


5 commentaires

Réglage du formulaire dans le constructeur ne ressemble pas parfaitement à moi ...


pour [precio] = "precio" est précisé dans le parent?


Qu'en est-il de (retirez les crochets [])


Au moment de la construction, les intrants n'ont pas été définis. Vous devez déplacer cela vers la méthode Ngoninit pour vous assurer que votre composant enfant a déjà reçu les intrants du parent. Ce qui se passe avec votre console.log est qu'à la phase oninit, il n'y a pas de valeur pour le precio et le NOMBRE, mais vous avez déjà créé une liaison dans le constructeur, alors lorsque le composant reçoit déjà les entrées, les modifications de la détection s'exécuteront et votre modèle sera mis à jour. avec les valeurs appropriées.


Je pense que les gens ignorent le fait que si vous n'êtes pas défini dans la console lors de l'appelant console.log (this.precio, cela.nombre); Intérieur Ngoninit . precio et nombre n'a pas été défini dans le parent


4 Réponses :


0
votes

Stackblitz - https://stackblitz.com/edit/angular-9d3bu4-so -56527061

Assurez-vous que le parent a défini le Nombre que vous passez (par la liaison d'une manière) lorsque vous utilisez < App-Reserva [Precio] = "Precio" [Nombre] = "Nombre">

app.component.ts xxx

app.commonent.html xxx


1 commentaires

Oui, ces valeurs sont déjà définies dans Réserva-paquet.commonent.ts Tout va bien avec ces valeurs. J'ai édité ma réponse afin que vous puissiez voir le code que j'ai ajouté. Je ne comprends pas pourquoi ces valeurs ne sont pas imprimées dans Reserva.Component.ts



1
votes

Les valeurs passées par entrée () ne sont pas disponibles dans le constructeur car elles ne sont pas encore passées à l'enfant. Envisagez de construire votre formulaire dans la méthode Ngoninit () et vous devriez être bon d'aller!


1 commentaires

Merci @gregbs Cela n'a pas résolu le problème. Je suis toujours imprimée sur la console dans ngoninit ces valeurs mais je reçois null



0
votes

Essayez de retirer les crochets du composant et d'utiliser la syntaxe d'interpolation {{}}: xxx

https://stackblitz.com/edit/angular-jwhf87?file=src%2fapp%2fapp.component.html << / p>


1 commentaires

Cela a provoqué les valeurs d'arrêter d'être null et il s'agit simplement d'un champ vide, c'est-à-dire: ""



2
votes

Votre logique d'initialisation de composant devrait vivre dans ngoninit (). puisque votre composant parent a une logique asynchrone dans son propre Ngoninit () Vous voulez alors empêcher votre App-Reserva Composant d'être créé jusqu'à ce que vous avez toutes les données dont vous avez besoin.

paquete-detalle.component.ts xxx

paquete-setalle.component.html xxx

ressera.component.ts xxx

Cette réponse ici fait un bon travail expliquant la différence entre constructeur et ngoninit .

La raison pour laquelle votre composant enfant initialise toujours un formulaire vide est parce que votre composant enfant a été créé avant que le composant parent ait fini l'exécution du rappel dans this.fs.getpaqueObject (ID) .valuechanges (). S'abonner () . Avec cette approche votre réserva.component.ts ne sera pas rendu tant que votre composant parent ne finit que toutes les données nécessaires à l'enfant.

Ceci n'est qu'une approche, vous pouvez aussi Regardez dans ONCHANGES pour faire réagir votre composant enfant lorsque le @input () Valeurs change ou Résolution pour charger les données dans l'itinéraire avant la charge du composant.


3 commentaires

Merci @spots Cela n'a pas résolu le problème. J'imprime toujours sur la console dans Ngoninit ces valeurs mais je reçois null


J'ai raté que votre composant parent a un comportement asynchreux. J'ai mis à jour ma réponse pour tenir compte de cela.


Excellents @spots Cela a beaucoup aidé, merci d'avoir expliqué l'approche. Je l'ai fait fonctionner mais avec un petit ajustement dans votre code: * ngif = "precio && nombre" cela a fonctionné pour moi. Si je le laisse dans * ngif = "null! == precio && null! == nombre" J'ai continué à obtenir null . Au fait, il y a une faute de frappe dans le * NGIF.