Angular2: ControlGroup in ControlArray

Question

Ich habe es schwer herauszufinden, wie man über eine ControlArray, die Controlgroup s in einer Vorlage enthält, iterieren. In TypeScript habe ich bisher ControlArray erstellt, und durch Iterieren von Daten, die von einem Remote-Dienst empfangen wurden, fügte ich dem Array einige ControlGroup s hinzu. Alles in Ordnung, bis zu diesem Punkt, und ich kann die erwartete Datenstruktur in der Konsole sehen.

In der Vorlage, ich habe dies:

<div *ngFor="#c of categories.controls"> 
    <div ngControlGroup="c"> 
    </div> 
</div> 

... wo categories die ControlArray ist (die eine Reihe von ControlGroup s in seiner controls Eigenschaft hält). Wenn ich die innere <div> weglasse, erhalte ich keinen Fehler, der suggeriert, dass Angular mit mir übereinstimmt, dass categories.controls tatsächlich ein Array ist. Aber sobald ich das innere <div> wieder hinzufüge (wo ich erwarte, dass die lokale Variable c eines der Objekte im Array sein wird), bekomme ich eine Ausnahme mit der Nachricht "Kann das Steuerelement nicht finden 'c' in [c in]". Ich habe auch verschiedene andere syntaktische Ansätze ausprobiert, aber keiner von ihnen hat funktioniert. Zusätzlich zu der Methode "Ich kann die Kontrolle nicht finden ..." bekam ich auch "Kann kein anderes unterstützendes Objekt finden ...", aber das brachte mich nicht weiter.

Irgendwelche Hinweise, was ich falsch mache?

Answer 1

ngControlGroup eine neue Kontrollgruppe definieren. Wenn ich Ihre Frage richtig verstanden habe, möchten Sie tatsächlich Elemente innerhalb einer Kontrollgruppe in einem Kontrollfeld bearbeiten. Check out this PLNKR: https://plnkr.co/edit/3gM2TuMGBW13HNATUcCO

<div *ngFor="#c of categories.controls; #i = index"> 
     Control group {{i}}: 
    <div> 
     <input type="text" class="form-control m-b" [ngFormControl]="c.controls.title"/> 
     <input type="text" class="form-control m-b" [ngFormControl]="c.controls.id"/> 
     </div> 
    </div> 

Answer 2

Ein Fehler ist

ngControlGroup="c" 

, die keine Bindung macht. Es übergibt das Literal c an ngControlGroup. Es sollte sein:

[ngControlGroup]="c" 

Die Fehler, die immer noch nach diesem Update hergestellt werden scheinen, weil es keine Kontrollen gibt.

Answer 3

Fehler wird durch

Wechsel behoben

ngControlGroup="c" 

in

attr.ngControlGroup="c" 

Da durch c zu ngControlGroup zuweisen Sie statt jede Bindung nur den Wert zuweisen. aber seltsam, warum [ngControlGroup] noch einige error.apart von diesen hier produziert arbeitet Beispiel https://plnkr.co/edit/Yw21a1aSivNg4G6gYkhF?p=preview