Meteor Angular 2 FormBuilder zwei verschachtelte Array-Objekte

Question

Ich könnte Hilfe bei der Erstellung eines Meteor Angular2-Formulars mit verschachtelten Object-Arrays auf der zweiten Ebene verwenden. Ich bin neu in Angular 2 und ich weiß nicht, wie ich damit umgehen soll.

My-Code so weit:

games.model.ts

import { CollectionObject } from './collection-object.models'; 

export interface Game extends CollectionObject { 
    name: string, 
    createdAt: Date, 
    questions?: [Questions] 
} 

interface Questions { 
    question: string, 
    type: string, 
    answers?: [Answers], 
    solution?: string 
} 

interface Answers { 
    answer: string, 
    correct?: boolean 
} 

Spiel-edit.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; 
import {AbstractControl, FormArray, FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms'; 
import { Subscription } from 'rxjs/Subscription'; 
import { ActivatedRoute } from '@angular/router'; 

import 'rxjs/add/operator/map'; 

import { Games } from '../../../../both/collections/games.collection'; 
import { Game } from '../../../../both/models/games.model'; 

import template from './game-edit.component.html'; 

@Component({ 
    selector: 'game-edit', 
    template 
}) 
export class GameEditComponent implements OnInit { 
    gameId: string; 
    paramsSub: Subscription; 
    game: Game; 
    gameForm: FormGroup; 


    constructor(
     private route: ActivatedRoute, 
     private fb: FormBuilder 
    ){} 

    ngOnInit() { 
     this.paramsSub = this.route.params 
      .map(params => params['gameId']) 
      .subscribe(gameId => { 
       this.gameId = gameId 

       this.game = Games.findOne(this.gameId); 
      }); 
     this.gameForm = this.fb.group({ 
      questions: this.fb.array(
       [this.buildQuestions('')] 
      ), 
      answers: this.fb.array(
       [this.buildAnswers('')] 
      ) 
     }) 
    } 

    buildQuestions(val: string) { 
      return new FormGroup({ 
       question: new FormControl(val), 
       type: new FormControl(val), 
       solution: new FormControl(val), 
       answers: this.fb.array(
        [this.buildAnswers('')] 
       ) 
      }) 
    } 

    buildAnswers(val: string) { 
      return new FormGroup({ 
       answer: new FormControl(val), 
       correct: new FormControl(val) 
      }) 
    } 
} 

Spiel-edit.component.html

<div class="game-edit-container"> 
    <h2>{{game.name}}</h2> 
    <div class="row"> 
     <div class="game-edit"> 
      <form layout="column" submit="saveGame()" [formGroup]="gameForm"> 
       <h3>Questions</h3> 
       <fieldset formArrayName="questions"> 
        <div class="form-group" *ngFor="let question of gameForm.get('questions').controls; let i=index" 
         [formGroup]='question'> 
         <div class="col-sm-6"> 
          <label [attr.for]="'question'+i">Question</label> 
          <input type="text" class="form-control" [attr.id]="'question'+i" formControlName="question"> 
         </div> 
         <div class="col-sm-6"> 
          <label [attr.for]="'type'+i">Type</label> 
          <select class="form-control" [attr.id]="'type'+i" formControlName="type"> 
           <option value="mulit">Multi</option> 
           <option value="free">Free</option> 
           <option value="guess">Guess</option> 
           <option value="pic">Pic</option> 
          </select> 
         </div> 
         <fieldset formArrayName="answers"> 
          <div class="form-group row" *ngFor="let answer of gameForm.get('answers').controls"; let j="index" 
           [formGroup]="answer"> 
           <label [attr.for]="'answer'+i+'-'+j">Answer</label> 
           <input type="text" class="form-control" [attr.id]="'answer'+i+'-'+j" formControlName="answer"> 
           <label [attr.for]="'correct'+i+'-'+j">Correct</label> 
           <input type="checkbox" class="form-control" [attr.id]="'correct'+i+'-'+j" formControlName="correct"> 
          </div> 
         </fieldset> 
         <div class="col-sm-6"> 
          <label [attr.for]="'solution'+i">Solution</label> 
          <input type="text" class="form-control" [attr.id]="'solution'+i" formControlName="solution"> 
         </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

Das erste Objekt Array ist wor König, , aber ich habe Probleme, die "Antworten" arbeiten zu bekommen. ?

modules.js hash = f3fb566 ...: 56177 AUSNAHME: Fehler bei ./GameEditComponent Klasse GameEditComponent - Inline-Vorlage: 0: 848, verursacht durch: ‚;: Fehler beim 'setAttribute' auf 'Element' ausführen " ist kein gültiges Attribut Name.

Das ist der Fehler, der von der Konsole empfangen wird.

Ich suchte nach verschachtelten Objekt Arrays 2. Ebene, aber ich konnte keine funktionierende Lösung finden.

hoffe, euch mir :) thx

so weit helfen können

Answer 1

*ngFor="let answer of gameForm.get('answers').controls"; let j="index" 

Bedürfnisse

*ngFor="let answer of gameForm.get('answers').controls; let j=index" 

es wurden missplaced "nach Kontrollen und j sein =