Meteor Angular 2 FormBuilder 两个嵌套数组对象

Question

我需要一些帮助来创建具有 2 级嵌套对象数组的 Meteor Angular2 表单。我是 Angular 2 的新手，我不知道如何处理。

到目前为止我的代码：

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>

第一个对象阵列正在运行，但我无法让 "answers" 工作。

modules.js?hash=f3fb566…:56177 EXCEPTION: Error in ./GameEditComponent class GameEditComponent - inline template:0:848 caused by: Failed to execute 'setAttribute' on 'Element': ';' is not a valid attribute name.

这就是我从控制台收到的错误。

我搜索了 2.level 嵌套对象数组，但找不到可行的解决方案。

希望你们能帮助我 :) 谢谢

Answer 1

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

需要

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

在控件和 j=

之后放错了 "

Meteor Angular 2 FormBuilder 两个嵌套数组对象

Meteor Angular 2 FormBuilder two nested Array Objects

arrays

nested

object

meteor

angular2-forms