La valeur de @Input() est toujours indéfinie

Question

J'ai créé un user photo component qui prend un @Input() cette valeur est l'userId. Si la valeur est passée, je récupère l'information à partir de Firebase lié à cet userId, si ce n'est pas le cas, je fais autre chose.

Mon composant photo d'utilisateur

import { Component, OnInit, OnDestroy, Input } from '@angular/core';

@Component({
    selector: 'user-photos',
    templateUrl: './user-photos.component.html',
    styleUrls: ['./user-photos.component.css']
})

export class UserPhotoComponent implements OnInit {

    @Input() userId: string;

    constructor() { 

        console.log('userId is:',this.userId);

    }

    ngOnInit() {

    }

    ngOnDestroy() {

    }
}

Comme vous pouvez le voir, j'ai déclaré le userId en tant que @Input() maintenant sur mon edit-profile component J'ai les éléments suivants :

<user-photos [userId]="TestingInput"></user-photos>

Maintenant, le composant Photo de l'utilisateur est rendu comme je le vois dans l'image. h1 apparaît, mais le userId est toujours indéfini ?

Aucune erreur n'apparaît dans la console du développeur, je ne suis donc pas tout à fait sûr de ce que j'ai fait de mal.

Answer 1

Il sera initialisé dans ngOnInit et non le constructeur. ( Veuillez également consulter le Documentation sur les crochets du cycle de vie d'Angular . )

ngOnInit() {
  console.log('userId is:',this.userId);
}

De même, si vous voulez passer un littéral comme une chaîne de caractères et utiliser des parenthèses [] vous devez le passer comme une chaîne de caractères en entourant la valeur de simples tics.

<user-photos [userId]="'TestingInput'"></user-photos>

La raison en est que l'expression contenue est évaluée dans le contexte du composant contenant. Sans cette expression, le composant essaiera de récupérer et de transmettre une propriété/un champ nommé(e) TestingInput qui sera indéfini ( à moins que vous n'ayez également un champ de ce nom. ).

Answer 2

Dans mon cas, j'ai dû utiliser *ngIf = "isLoaded" sur le modèle du parent d'abord.

Sur le composant parent

    <div *ngIf = "isLoaded">
       <app-child-component [dataToChild]="dataFromParent"> </app-child-component>
    </div>

Sur la composante enfant

      @Input() dataToChild: any;
        constructor() { }
        ngOnInit(): void {
             console.log(this.dataToChild);
         }

Answer 3

Dans mon cas, je passais dans undefined comme un entrée et je supposais qu'Angular traiterait le cas d'undefined de la même manière que le scénario par défaut. Cette hypothèse était erronée, même si elle n'est pas clairement décrite dans le document intitulé Documentation sur l'interaction des composants d'Angular . Voici le scénario d'utilisation :

parent.component.html :

...
[mVal]="undefined"
...

child.component.ts :

...
@input('mVal')
mVal: boolean = true
...

La valeur de mVal sera undefined et non true comme vous pouviez vous y attendre.

Angular ne rendra la valeur vraie (cas par défaut) que si elle est non défini sur le composant parent ; sinon, il transmettra la valeur telle qu'elle est (même si c'est undefined ).

Vous pouvez résoudre ce problème en vérifiant si la valeur est indéfinie dans le champ OnInit ou même dans le constructeur du composant.

Answer 4

Répondre à votre question

La valeur de @Input() est toujours indéfinie

La raison pour laquelle vous obtenez undefined dans ngOnInit est qu'au moment où le composant est initialisé vous n'avez pas réellement passé dans userId.

<user-photos [userId]="TestingInput"></user-photos>

Afin d'obtenir la valeur de l'@Input dans la fonction OnInit(), vous pouvez faire quelque chose comme :

Mon composant photo d'utilisateur

import { Component, OnInit, OnDestroy, Input } from '@angular/core';

@Component({
    selector: 'user-photos',
    templateUrl: './user-photos.component.html',
    styleUrls: ['./user-photos.component.css']
})

export class UserPhotoComponent implements OnInit {

    @Input() userId: string;

    constructor() {  }

    ngOnInit() {
     setTimeout(() => {
         console.log('userId is:',this.userId);  // You will get the @Input value
     });
    }

    ngOnDestroy() {

    }
}

Answer 5

J'ai récemment rencontré le même problème et après une longue recherche, j'ai décidé de mélanger mes idées et j'ai abouti à ce qui suit.

1.déclarer un objet tableau des données que vous voulez passer comme

private sendMe: Array<{title: string}> = [];

2.pousser les données que vous voulez envoyer au tableau comme

this.sendMe.push({title: this.passMe});

3 et enfin passer le tableau comme

<app-download-section [movieTitle]="sendMe"></app-download-section>

4. le recevoir comme

   import { Component, OnInit, OnDestroy, Input } from '@angular/core';

   @Component({ selector: 'app-download-section', templateUrl: './download-section.component.html', styleUrls: ['./download-section.component.css'] }) export class DownloadSectionComponent implements OnInit {

   @Input('movieTitle') movieTitle: Array<object> = [];

   ngOnInit() { console.log(this.movieTitle); }

   }

J'ai trouvé ceci problème connexe