Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angular 4 how to access ViewChildren _results

i have a list of checkboxes inside an ngFor:

    <md-checkbox
      #hangcheck
      [id]="hangout?.$key"
      class="mychecks"
      >
    I'm Interested
  </md-checkbox> 

i refrence them in the component like so:

@ViewChildren("hangcheck") hangchecks: QueryList<any>;

then in ngAfterViewInit i need to loop them:

  ngAfterViewInit(){
console.log('the array: ',this.hangchecks)
this.hangchecks._results.forEach((item) => {
  console.log('the item: ',item)
});
 }

but i get: Property '_results' is private and only accessible within class 'QueryList' in the console i see this: enter image description here so as you can see there is the array in the _results. but how can i access it and loop it?

like image 293
Ron Avatar asked Aug 03 '17 11:08

Ron


People also ask

How do you use View for kids?

Descriptionlink. Use to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. View queries are set before the ngAfterViewInit callback is called.

What is difference between ViewChild and ViewChildren?

Working with @ViewChildren is similar to @ViewChild, but the difference between the two is @ViewChildren provides a list of element references rather than returning a single reference. It is used to reference multiple elements. We can then iterate the list of the element referenced by the variable.

What is QueryList in Angular?

An unmodifiable list of items that Angular keeps up to date when the state of the application changes.

What is the use of @ViewChild in Angular 7?

ViewChildlink Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.


1 Answers

To access elements, you have to wait until its ready

this.hangchecks.changes.subscribe(a => a.forEach((b, i) => console.log(b)));
like image 190
Mert Aksoy Avatar answered Sep 23 '22 17:09

Mert Aksoy