Discussion :

[bams2009]

Salut tout le monde

Je galère vraiment à comprendre le fonctionnement de ViewChild / ViewChildren
Je cherche à récupérer les ElementRef d'un composant généré en *ngFor via un appel à une BDD firebase

Est-ce que quelqu'un pourrait m'expliquer comment récupérer dans ParentComponent.ts tous les nativeElement des instances <app-child>?



ParentComponent.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<main>
  <section #projectsWrapper *ngFor="let project of projects">
    <app-child #project [project]='project'> </app-child>
  </section>
</main>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
ParentComponent.tsimport { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { Subscription } from 'rxjs';
import { DatabaseService } from './../database.service';
import { Project } from './../models/project.model';
import { gsap, Power4 } from 'gsap';
import { ChildComponent } from '../child/child.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 
  childs = [];
 
  @ViewChild(ChildComponent)
  private child: ChildComponent;
 
  @ViewChildren(ChildComponent)
  public childsList: QueryList<ChildComponent>;
 
  sub: Subscription;  
  projects: Project[];
 
 
 
  constructor(
    private databaseService: DatabaseService
  ) { }
 
  ngOnInit(): void {     
 
  }
 
  ngAfterViewInit(){
 
    this.sub = this.databaseService.getChilds().subscribe(
      project => (
          this.onDataLoaded(project)
      )
    )
 
  }
 
  onDataLoaded(project: any) { 
 
 
 
 
 
  }
 
}

DatabaseService.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireStorage} from '@angular/fire/storage';
import { ChildComponent } from './child/child.component';
 
@Injectable({
  providedIn: 'root'
})
export class DatabaseService {
 
  constructor(
    private db: AngularFirestore,
    private fstore:AngularFireStorage
  ) { }
 
 
 
 
  getChilds() {
    return this.db
            .collection<ChildComponent>('projects')
            .valueChanges();
  }
 
}

[krakatoa]

essaye ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 @ViewChildren("project")
  public childsList: QueryList<ChildComponent>;
 
  ngAfterViewInit(): void {
    console.log(this.childsList);
  }

[bams2009]

Merci beaucoup @krakatoa
C'était juste ça !!!

[bams2009]

Bon en fait, ça marche si j'ajoute les app-child à la main mais pas avec l'appel firebase


J'ai fait ça

ParentComponent.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { Subscription } from 'rxjs';
import { DatabaseService } from './../database.service';
import { Project } from './../models/project.model';
import { gsap, Power4 } from 'gsap';
import { ChildComponent } from '../child/child.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 
  childs = [];
 
  @ViewChild(ChildComponent)
  private project: ChildComponent;
 
  @ViewChildren(ChildComponent)
  public childsList: QueryList<ChildComponent>;
 
  sub: Subscription;
  projects: Project[];
 
 
 
 
  constructor(
    private databaseService: DatabaseService
  ) { }
 
  ngOnInit(): void {
 
  }
 
  ngAfterViewInit(){
 
    this.sub = this.databaseService.getChilds().subscribe(
      projects => (
          this.onDataLoaded(projects)
      )
    )
 
  }
 
  onDataLoaded(projects: any) {
    this.projects = projects;
 
    console.log('projects', projects);
    console.log("childslist", this.childsList);
 
 
 
  }
 
}

ParentComponent.html

Si j'ajoute à la main j'ai bien ma QueryList.length = 3

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<app-child> </app-child>
<app-child> </app-child>
<app-child> </app-child>

Mais si je fais l'appel à la base, ma QueryList est vide..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<app-child #childsList *ngFor="let project of projects" [project]='project'> </app-child>

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 @ViewChildren("childsList ")
  public childsList: QueryList<ChildComponent>;
 
  ngAfterViewInit(): void {
    console.log(this.childsList);
  }

tu essayes de faire quoi, dans quel but ?

[bams2009]

Merci de t'intéresser à mon problème

J'essaie d'implémenter une animation GSAP et tout fonctionne bien à part quand je cherche à utiliser des composants générés depuis cette QueryList.
Je sais pas si je suis clair.. J'ai fait un repo si ça peut t'aider à comprendre : https://github.com/plvbroker/public-lab.git (branche 'firebase')

J'ai pu progresser grâce à tes conseils mais ça sort du thème principale de mon post parce que j'arrive maintenant à récupérer tous les ElementRef dans un tableau mais là encore l'animation ne fonctionne pas correctement
Pourtant si tu regardes dans mon screenshot, dans la console le css est bien modifié par GSAP..

[dukoid]

tu veux dire que le css est modifié mais il n'est pas répercuté à l'écran ?


chez moi, via firerfox et edge, je vois bien "project#01" disparaitre
par contre sur chrome ça ne fonctionne pas

c'est ça ton problème ?