Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
QueryList cambia la suscripción no funciona

Tengo una QueryList en un componente. Estoy agregando dinámicamente otros componentes, que estarán presentes en QueryList , pero si me suscribo a los changes de QueryList , no pasa nada. Pensé que era porque me suscribí a ngAfterViewInit , pero QueryList aún no está undefined en ngOnInit .

Aquí tengo el plunkr .

código:

 @Component({ ... }) export class AppComponent { @ViewChildren(ControlFactoryDirective) factories: QueryList<ControlFactoryDirective> ngAfterViewInit() { this.factories.changes.subscribe(() => { console.log('changed') }) } }
about 4 years ago · Santiago Trujillo
3 answers
Answer question

0

La cuestión es que la lista que llega a la propiedad de su factories ya está precargada. Por lo tanto, simplemente no tiene la oportunidad de suscribirse a sus cambios antes de que se complete por primera vez. Pero, por supuesto, todos los cambios que suceden más tarde llegan a su suscriptor.

Aquí está el plunkr con su ejemplo actualizado: tenga en cuenta que las fábricas ahora tienen un configurador que demuestra que está precargado (normalmente no lo necesita en una aplicación real, eso es solo para averiguar qué valor proviene del marco)

Creo que es un comportamiento totalmente válido. Entonces, en ngAfterViewInit , recorra los valores en QueryList y haga lo mismo que está a punto de hacer en el suscriptor:

 ngAfterViewInit() { this.processChildren(); // first call to processChildren this.factories.changes.subscribe(_ => this.processChildren() // subsequent calls to processChildren ); } private processChildren(): void { console.log('Processing children. Their count:', this.factories.toArray().length) }
about 4 years ago · Santiago Trujillo Report

0

Después de realizar un cambio en los objetos de la lista de consultas, debe llamar a la lista de consultas para notificar los cambios.

 update() { this.factories.forEach(factory => { console.log(factory.componentRef.instance.model.data = "alma") // factory.() this.factories.notifyOnChanges(); }) }
about 4 years ago · Santiago Trujillo Report

0

También puede agregar startWith(undefined) así:

 ngAfterViewInit() { this.factories.changes.pipe(startWith(undefined)).subscribe(() => { console.log('changed') }) }

Esto activará el controlador de suscripción inmediatamente.

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!