Angular-使用@ViewChildren订阅子组件中的更改

Question

I have these children components

<app-organization-item *ngFor="let organization of rows" [organization]="organization"></app-organization-item>

Inside this components, I have multiple select boxes with multiple values.

Something like this:

<div class="col-xs-12" *ngIf='availableOrganizations.length > 0'>
<select [ngModel]="organization" (ngModelChange)="onChange($event)" [compareWith]="compareFn">
<option *ngFor="let org of availableOrganizations" [ngValue]='org' id="{{org.organization_id}}">{{org.name}}</option>
</select>
</div>

And:

onChange(value) { this.organization = value; }

How can I get the values of all the components inside the parent component? (without using @Output).

Using @ViewChildren inside the parent component won't work:

@ViewChildren(OrganizationItemComponent) components: QueryList<OrganizationItemComponent>

and

ngAfterViewInit() {
     this.components.changes.subscribe(() => {
       this.stuff = this.components.toArray();
       console.log(this.stuff);
    });
}

Nothing will show up when I change the select box inside de children component. What am I doing wrong?

Answer 1

You can use service to set the communication between them.

import { Injectable, Inject } from '@angular/core';
import { Observable, Subject } from 'rxjs';
export interface OrderElement {
   index: number,
   item: any

}

@Injectable()
export class OrganizationsService {
   organizations: OrderElement[] = [];
   organizationsStream = new Subject();
   constructor(
     ) {
     }

     setNewValue(itemIndex, object) {
         let i = this.organizations.findIndex(element => element.index === itemIndex)
           if(i >= 0 ) {
             this.organizations[i].item = object;
           } else {
              this.organizations.push({index: itemIndex, item: object, oldValue: undefined})
           }
           this.organizationsStream.next(this.organizations);
     }
     getStream() {
        return Observable.from(organizationsStream).startWith(organizations);
     }

}

In constructor parent:

constructor(
   private organizationsService: OrganizationsService
  ) {
     this.organizationsService.getStream().subscribe(element => {

       //You got all value
    )

  }

In template set:

<app-organization-item *ngFor="let organization of rows; index as i;" [organization]="organization" [serviceToCall]="organizationsService" [index]="i"></app-organization-item>

In OrganizationItemComponent set:

 @Input() public serviceToCall;
 @Input() public index: number;

 onChange(value) { 
   this.organization = value; 
   this.serviceToCall.setNewValue(index, value);
 }

Remember to unsubscribe Observable and set provider for service.