Wie Zugriff auf den Indexwert von Formarray von Winkel, wenn verschachtelte FormControls in einer separaten Komponente platziert sind?

Question

Ich folgte einem Tutorial von der Website Link https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2, um ein reaktives Formular mit einer Fähigkeit, mehrere Formularsteuerelemente hinzufügen und das hat gut funktioniert. Ich habe die geschachtelten Formularsteuerelemente in einer separaten Komponente verschoben, wie im Lernprogramm erläutert, und muss auf den Indexwert des Formulararrays von der übergeordneten Komponente zugreifen. Ich möchte dieser Wert Index, dass der formconrols Standardwert in eins setzen hier ist mein Code in plnkr, http://plnkr.co/edit/ZjEuBWrmJDiRmP4FeCzv?p=preview

meine getrennten Tag und Beschreibung Komponente,

import { Component, Input } from '@angular/core'; 
    import { FormArray, Validators, FormGroup } from '@angular/forms';  

    @Component({ 
     selector: 'day-and-daydescription', 
     template: ` <div [formGroup]="formGroup"> 
         <div class="form-group col-xs-4" > 
          <label for="text">Day</label> 
          <input type="text" class="form-control" formControlName="day" [ngModel]="group.i + 1" readonly>      
         </div> 
         <!--Day Description--> 
         <div class="form-group col-xs-4"> 
          <label>Description</label> 
          <input type="text" class="form-control" formControlName="description"> 
         </div> 
        <div>` 
    }) 
    export class DayAndDescriptionComponent { 
     @Input('group') 
     public formGroup: FormGroup; 
    } 

Bitte haben Sie einen Blick auf den gesamten Code im Plünderer.

Answer 1

Wie Sie selbst bemerkt haben, können Sie das gesamte Formular vom übergeordneten Element bearbeiten, ohne dass Sie versuchen müssen, auf den Index des untergeordneten Elements zuzugreifen. Alles, was Sie im Elternformular ausführen, spiegelt sich im Kind wider.

und der Fehler in Bezug auf:

Expression has changed after it was checked.

Das ist normal und passiert in dev-Modus. Auszug aus Expression ___ has changed after it was checked:

In short, when in dev mode, every round of change detection is followed immediately by a second round that verifies no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.

Es ist die tatsächliche @Input in Kind, das ist der Grund dafür. Sie können die Änderungserkennung manuell auslösen, und dieser Fehler ist verschwunden. Da wir mit einem @Input zu tun haben, können Sie dies in ngOnChanges tun:

constructor(private ref: ChangeDetectorRef) { } 

ngOnChanges() { 
    this.ref.detectChanges() 
}