子组件（@ViewChildren）的 FormArray 和其他 arrays 为空

Question

I have @ViewChildren child Component( BookFormComponent ) inside a parent component( LibraryComponent ). In my parent component I make a service call to get one BookData object.

I give the DookData object to a method of the child component initBookData(...) . I want the child component to use the BookData to initialize its form controls. The BookData has an attribute selectedTypes which contains an array of books the user has already selected. I use the array to check its checkboxes.

There are 10 checkboxes and for instance if a user has 5 elements in the selectedTypes array then those 5 elements has to be checked out of the 10 checkboxes when the view is displayed.

The issue am having now is the form controls for name and color are initialized with the values from the BookData object but the checkboxes are not checked(selected) when the view is displayed. I did console.log()'s inside initSelectedTypes(....) of the child component and the lengths of the arrays are 0's meanwhile the child component uses the same arrays to display the checkboxes in the UI but when it has to use the same array to check(select) some of the checkboxes then the lengths are 0's.

My understanding is that the <book-form #book></book-form> in the parent component UI is the same as the attribute @ViewChildren(BookFormComponent) book: QueryList<BookFormComponent>; in the component class. So since the view is displayed then when I call a method on the attribute (book) then I expect all attributes of (book) to be initialized as well. I don't expect the arrays to be empty. All checkboxes are displayed correctly in the view but when I call initBookData(...) the arrays are empty.

I am using @ViewChildren because I tried @ViewChild and I was getting "undefined" (so could not even call the child's methods)

(I have omitted certain things in the code snippet to conserve space):

interface BookData {
   name?: string,
   color?: string,
   selectedTypes?: Array<string> // this array contains the types a user has selected already
}



// PARENT COMPONENT CLASS
class LibraryComponent implements AfterViewInit, {
    @ViewChildren(BookFormComponent) book: QueryList<BookFormComponent>;

    // ADDITIONAL CHILDREN FOR OTHER mat-step omitted for clarity

   bookData: BookData = {}

 ngAfterViewInit(): void {

   this.getBookData();

     this.book.changes.subscribe((algemen: QueryList<BookFormComponent>) => {
      book.first.initBookData(this.bookData);
    });
 }

// this method returns one book from the server and assigns it to "this.bookData"
getBookData() {
  bookdataService.getBookData().subscribe(book => {
     this.bookData = book;
});
}

}




//  PARENT COMPONENT UI
<mat-horizontal-stepper #stepper linear>

 <mat-step [stepControl]="book.bookForm">
       <ng-template matStepLabel>Book</ng-template>
       <book-form #book></book-form>
 </mat-step>

 <mat-step>
// ADDITIONAL STEPS ARE OMITTED FOR CLARITY
 </mat-step>
</mat-horizontbal-stepper>




// CHILD COMPONENT CLASS
Component({
  selector: 'book-form'
})
class BookFormComponent {

   bookForm: FormGroup;
   name = new FormControl('');
   color = new FormControl('');
   // Checkboxes for types of books a user can select. user can select multiple checkboxes
   types = new FormArray([]); 

   optionsTypes = [];

   ngOnInit(): void {
      this.bookForm = this.fb.group({
        name: this.name,
        color: this.color
       });
       
      this.initializeTypesCheckboxes();
   }

  //  This function will create 10 checkboxes that a user can select multiple of them
  private initializeTypesCheckboxes() {
    this.bookservice.getTypeOptions().subscribe(results => {
     
      // the results from the server is array of strings of 10 elements
      //  eg: ["Maths", "English", "Chemistry", ...]
      this.optionsTypes = results; 

      // we create checkboxes based on the number of types we get from the server
      const typeCheckboxes = this.optionsTypes.map(t => new FormControl(false));

     // we push the the checkboxes to the "this.types" form array
      typeCheckboxes.forEach(type => this.types.push(type));
    });
  }


// This method is called from the parent component
 public initBookData(bookData: BookData) {
   this.naam.setValue(bookData.naam);
   this.color.setValue(bookData.color);
   this.initSelectedTypes(this.types, this.optionsTypes, bookData.selectedTypes);
 }

// this method will use the already "alreadySelectedTypes" array to pre-select some of the checkboxes.
 private initSelectedTypes(formArray: FormArray, optionsTypes: Array<string>, alreadySelectedTypes: Array<string>) {
    for (let i = 0; i < formArray.controls.length; i++) {
      for (const type of alreadySelectedTypes) {
        if (optionsTypes  === type) {
          formArray.controls[i].patchValue(true);
        }
      }
    }
  console.log("LENGTH-formArray:", formArray.length); // i get O
  console.log("LENGTH-optionsTypes:", optionsTypes.length); // i get O
 }
  

}

What am I doing wrong?

Answer 1

Have you tried ContentChildren?

@ContentChildren(BookFormComponent) book: QueryList<BookFormComponent>;

Answer 2

It's unclear to me why you're using@ViewChildren at all. Unless I'm missing something about what you're trying to do, I think you're making your life more complicated than it needs to be.

The Parent Class

Your parent component class can be stripped down to just:

 // PARENT COMPONENT CLASS
    class LibraryComponent implements OnInit {
      // ADDITIONAL CHILDREN FOR OTHER mat-step omitted for clarity

      book: BookData = {};
      form: FormGroup = new FormGroup()

      ngOnInit(): void {
        this.bookService.getBookData.subscribe(book => (this.book = book));
      }
      //This is to get the form group from a child Output event and use it in stepper.
      onFormReady(form: FormGroup): void {
        this.form = form;
      }
    }

Parent template

The way to pass data to child components from their parent is through an @Input directive. So, your parent template would look something like:

 <mat-horizontal-stepper #stepper linear> <mat-step [stepControl]="form"> <ng-template matStepLabel>Book</ng-template> <book-form (formGroup)="onFormReady($event)" [bookData]="bookData"></book-form> </mat-step> <mat-step> // ADDITIONAL STEPS ARE OMITTED FOR CLARITY </mat-step> </mat-horizontbal-stepper>

Child Class

Your child class can take care of setting up the form from its input, and then send the form group back up to the parent as a @Output. It would look something like this:

 // CHILD COMPONENT CLASS Component({ selector: 'book-form' }) class BookFormComponent { @Input('bookData') bookData: BookData @Output('formGroup') formEmitter = new EventEmitter<FormGroup>(); bookForm: FormGroup; options: string[] ngOnInit() { // get and store type options at start this.booksService.getTypeOptions(options => { // once options are ready. // If options is empty, then the function on your service isn't working. this.options = options; this.bookForm = this.initializeForm(); // make the form this.formEmitter.emit(this.bookForm); //send it to parent }) } initializeForm(): FormGroup { const { name, color, selectedTypes } = this.bookData; const form = this.fb.group({ name: new FormControl(name), color: new FormControl(color), types: new FormArray([]) }) // One form group for each possible option. Each group has a single control named after the option it represents. this.options.forEach(option => { let value = selectedTypes.includes(option); form.types.push(this.fb.group({[option]: new FormControl(value)})); }) return form; } }

I wouldn't expect this to work as is, but it's more or less the direction you should go in. It strips out a lot of the fat, makes your code easier to understand, and sends data between components the way you're supposed to.

The docs have a very good section that goes over the methods for doing this: https://angular.io/guide/component-interaction