流星Angular 2 FormBuilder兩個嵌套的數組對象

我可以使用一些幫助創建一個流星Angular2形式與2級嵌套對象數組。 Im新Angular 2，我不知道如何處理這個。流星Angular 2 FormBuilder兩個嵌套的數組對象

到目前爲止我的代碼：

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 
}

遊戲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) 
      }) 
    } 
}

遊戲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>

第一個對象數組是wor國王，但我有問題要獲得「答案」的工作。？

modules.js哈希= f3fb566 ...：56177 EXCEPTION：錯誤./GameEditComponent 類GameEditComponent - 聯模板：0：848引起的：無法執行上 '元素' 的setAttribute'：「; 「名稱不是有效的屬性。

多數民衆贊成即時錯誤從控制檯接收。

我搜索了2級嵌套對象數組，但我找不到工作解決方案。

希望你們能幫助我了:) THX到目前爲止

來源

2017-07-17 xQp

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

需求是

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

控制和j後有missplaced「=

來源

2017-07-17 12:27:20 xQp

流星Angular 2 FormBuilder兩個嵌套的數組對象

回答

相關問題