5
votes

Passer une valeur asynchrone du composant parent au composant enfant avec @Input

J'essaie de transmettre une carte, qui provient d'une API, du composant parent au composant enfant, en angulaire 7.

parent.ts :

@Component({
  selector: 'app-room-card',
  templateUrl: './room-card.component.html',
  styleUrls: ['./room-card.component.css']
})
export class RoomCardComponent implements OnInit {
    @Input('categories') catname: any;

    ngOnInit() {
        console.log('aaa'+ this.catname);
    }
// ..
}

typescript angular angular7 parent-child angular-components

1 commentaires

Avez-vous essayé d'utiliser ngIf pour rendre le composant enfant uniquement lorsque l'appel d'API est résolu? Sinon, vous passez une valeur non définie jusqu'à ce que la résolution se produise. Vous pouvez également essayer d'utiliser un autre hook de cycle de vie qui détecte les modifications de la valeur lors de l'initialisation et lors des modifications.

4 Réponses :

5
votes

Essayez de changer le code de votre composant comme,

<app-room-card *ngIf="categories" [categories]="categories"></app-room-card>

et d'avoir * ngIf sur le composant parent juste pour vous assurer que les données sont transmises à l'enfant une fois que vous obtenez la réponse de votre API p >

export class RoomCardComponent implements OnInit {
   @Input() categories: any; 
   ngOnInit() {
   console.log('aaa'+ this.categories);
   }
}

4 commentaires

Même résultat non défini

as-tu essayé avec ngIF

Une explication pourquoi ce @Input ('categories') catname: any; ne fonctionnerait pas?

@MaihanNijat ça fonctionnera! juste pour s'assurer qu'OP utilise le même nom sans alias

13
votes

Vous essayez de transmettre des données asynchrones au composant enfant. Vous avez différentes solutions pour y parvenir. Par exemple, vous pouvez utiliser ngOnChanges au lieu de ngOnInit:

<app-room-card *ngIf="categories" [categories]="categories"></app-room-card>

Une autre solution consiste à utiliser * ngIf , afin de retarder l'initialisation des composants des posts:

ngOnChanges() {
    console.log('aaa'+ this.catname);
}

Jetez un œil à ce lien: https://scotch.io/tutorials/3-ways- passer-les-données-asynchrones-aux-composants-enfants-angulaires-2 # toc-solution-2-use-ngonchanges

0 commentaires

-1
votes

Vous devriez peut-être définir votre entrée de cette manière, donc lorsque l'attribut est chargé immédiatement, il est mis à jour dans le composant enfant:

  @Input('categories')
  set categories(value: any) {
    this._categories = value;
  }

0 commentaires

-2
votes

J'ai eu le même problème, j'ai corrigé avec une variable "chargement" de type booléen;

 <app-room-card *ngIf="!loading" [categories]="categories"></app-room-card> 
 // i used this variable to wait data of my parent component

Donc, en HTML

export class AppComponent {
  title = 'taurs-frontend';
  categories: any;
  isLoggedIn = false;
  loading:boolean = false; -> // my variable

ngOnInit(){
    this.loading = true; -> // true when the request starts 
    this.roomDataService.getData(`${environment.api_url}/api/Categories`)
    .subscribe(categories => {
      this.categories=categories
      this.loading = false; // false with the request ends
    }); 
  }

J'espère que cela résoudra votre problème ou aidera quelqu'un d'autre.

0 commentaires