Angular 4将ngModule对象传递给组件

时间:2018-10-27 14:09:41

标签: angular components angular2-ngmodel

我正在尝试遵循https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html,它说明了如何将ngModel传递给组件。但是,当我传递模型对象时,它给我“无法分配给引用或变量!”错误。请帮帮我。 我的JSON对象是 [     {

    "MyCollection": [
      {
            "MyID": "a0461e40-0c39-40a2-ba5e-12dc429ac050",
            "Name": "Display Name1",
            "TotalPoints": 70,
            "Points": [
                {
                    "Id": "70622085-1c65-4597-b4c0-d676f4eef04b",
                    "DisplayHeading": "Calc Points",
                    "CalculatedField": true,
                    "PointValues": [
                        {
                            "Id": "a5bbe626-c8c3-4452-9efc-31455814cfae",
                            "Desc": "Between 5 - 10 then 80%",
                            "Between1": 5,
                            "Between2": 10,
                            "Point": 80
                        },
                        {
                            "Id": "44866e94-4023-49bb-9478-84b8bcf9e155",
                            "Desc": "Between 10% - 20 % then 70%",
                            "Between1": 10,
                            "Between2": 20,
                            "Point": 70
                        },
                        {
                            "Id": "8104364e-c9e1-4c79-b726-e6cfa25aa994",
                            "Desc": "Between 0% - 5% then 95%",
                            "Between1": 0,
                            "Between2": 5,
                            "Point": 95
                        }
                    ],
                    "Text1Value": 5,
                    "Text2Value": 10,
                    "SetDPVID": "8104364e-c9e1-4c79-b726-e6cfa25aa994"
                },
                {
                    "Id": "e4a2aec6-640a-40ad-8c3c-6769bd522e4e",
                    "DisplayHeading": "Calc Point2",
                    "CalculatedField": false,
                    "PointValues": [
                        {
                            "Id": "4ad00772-021a-4807-a03f-5b351e22349b",
                            "Desc": "Less than 50%",
                            "Point": 50
                        },
                        {
                            "Id": "957342dd-d9d9-4150-bc08-f072da9084c5",
                            "Desc": "Less than 70%",
                            "Point": 100
                        }
                    ],
                    "Text1Value": “Select Drop down value”,
                    "Text2Value": null,
                    "SetPVID": "957342dd-d9d9-4150-bc08-f072da9084c5"
                }

            ]
        },
        {
            "MyID": "9b4106c6-9c5e-4a82-a8be-1565f229ce61",
            "Name": "Display Name2",
            "TotalPoints": 50,
            "Points": [
                {
                    "Id": "e4a2aec6-640a-40ad-8c3c-6769bd522e4e",
                    "DisplayHeading": "Point1",
                    "CalculatedField": false,
                    "PointValues": [
                        {
                            "Id": "4ad00772-021a-4807-a03f-5b351e22349b",
                            "Desc": "Less than 50%",
                            "Point": 50
                        },
                        {
                            "Id": "957342dd-d9d9-4150-bc08-f072da9084c5",
                            "Desc": "Less than 70%",
                            "Point": 100
                        }
                    ],
                    "Text1Value": “Select Drop down value”,
                    "Text2Value": null,
                    "SetPVID": "957342dd-d9d9-4150-bc08-f072da9084c5"
                }
            ]
        }            
    ]
}

]

我的组件HTML是

<form #form="ngForm">
    <div *ngFor="let coll of retroInfo[0].MyCollection">
        <div>{{coll.Name}}[{{coll.TotalPoints}}]</div>
        <div *ngFor="let pnt of coll.Points">
            <cal-field *ngIf="pnt.CalculatedField" [(ngModel)]="pnt" [ngModelOptions]="{standalone: true}"></cal-field>
            <non-cal-field *ngIf="!dp.CalculatedField"></non-cal-field>
        </div>
    </div> 
</form>

我需要构建如下表格

Form

0 个答案:

没有答案