Angular ngFor的模板分析错误，FormArray_Angular_Webpack_Ngfor

Angular ngFor的模板分析错误，FormArray

angular webpack

Angular ngFor的模板分析错误，FormArray,angular,webpack,ngfor,Angular,Webpack,Ngfor,我正在使用ReactiveFormsModule构建动态对象。我的主要模块是应用程序。然后我有一个子模块config。此组件具有ObjectConfigComponent和FieldConfigComponent <div formArrayName="fields"> <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index"

我正在使用ReactiveFormsModule构建动态对象。我的主要模块是应用程序。然后我有一个子模块config。此组件具有ObjectConfigComponent和FieldConfigComponent

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

我使用引用构建文章中提到的plunker似乎有效。我还没能开我的车

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

这是我的密码

export class CompositeObject {
    public fields: Field[];
}

export class Field {
    public name: string;
    public datatype: DataType;
}

export enum DataType {
    string = 1,
    number,
    date
}

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

ObjectConfigComponent：

import { Component, OnInit } from '@angular/core';
import { CompositeObject } from './../../models/compositeobject';
import { Validators, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
    selector: 'objectconfig',
    templateUrl: 'objectconfig.component.html'
})
export class ObjectConfigComponent implements OnInit {
    public myForm: FormGroup;
    constructor(private _formbuilder: FormBuilder) { }

    public ngOnInit() {
        this.myForm = this._formbuilder.group({
            fields: this._formbuilder.array([
                this.initField(),
            ])
        });
     }

    public save(model: CompositeObject ) {
         console.log(model);
    }

    private initField() {
        // initialize our address
        return this._formbuilder.group({
            name: ['', Validators.required],
            datatype: ['string', Validators.required]
        });
    }

    private addField() {
    // add address to the list
        const control = <FormArray>this.myForm.controls['fields'];
        control.push(this.initField());
    }

    private removeField(i: number) {
    // remove address from the list
        const control = <FormArray>this.myForm.controls['fields'];
        control.removeAt(i);
    }
}

<div class="row">
    <div class="well bs-component">
        <form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
            <!--fields-->
            <div formArrayName="fields">
                <div *ngFor="let field of myForm.controls.fields.controls; let i=index">
                    <div [formGroupName]="i">
                        <fieldform [group]="myForm.controls.fields.controls[i]"></fieldform>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button class="btn btn-link" (click)="addField()">Add another attribute</button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-10 col-lg-offset-2">
                    <button type="reset" class="btn btn-default">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

HTML

<div [formGroup]="fieldForm">
     <!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
    <div class="form-group">
        <!--name-->
        <label class="col-lg-2 control-label">Attribute</label>
        <div class="col-lg-4">
            <input class="form-control"  id="inputName-{{i}}" type="text" formControlName="name">
            <!--display error message if street is not valid-->
            <small [hidden]="fieldForm.controls.name.valid">
                name is required
            </small>
        </div>
        <!--datatype-->
        <div class="col-lg-4">
            <select class="form-control" formControlName="datatype">
                <option>string</option>
                <option>number</option>
                <option>date</option>
            </select>
        </div>
    </div>
</div>

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16


属性
名称是必需的
一串
数
日期

我得到以下错误：

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

错误：未捕获（承诺中）：错误：模板分析错误：无法绑定改为“ngForOf”，因为它不是“div”的已知属性。("

        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16


]*ngFor=“let field of myForm.controls.fields.controls；let i=index”>
]
加
        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

导入：[CommonModule]

到包含您的组件的@NgModule（…）
。也不要忘记导入包：
        <div formArrayName="fields">

            <div [ERROR ->]*ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [formGr"): ObjectConfigComponent@5:21 Property binding ngForOf not used by any directive on an embedded

        <div formArrayName="fields">

            [ERROR ->]<div *ngFor="let field of myForm.controls.fields.controls; let i=index">

                <div [f"): ObjectConfigComponent@5:16

从“@angular/common”导入{CommonModule}；
这太不好了……我开始质疑我的理智。错误消息肯定会暗示一些类似的东西，因为认为遗漏了什么东西是非常违反直觉的…（我还冒昧地更正了你答案中的一个类型-希望没问题。）感谢您的修复。很难生成更好的错误消息。NgForOf
与其他任何错误消息一样是一个指令。您可能希望使用另一个包中的指令。在您习惯了Angular之后，当您看到此错误消息时，应该清楚它的含义以及如何修复。