输入复选框模型未绑定到嵌套对象

时间:2019-04-07 03:09:26

标签: typescript angular7

更新

这是自角度2以来的一个丑角中的错误。它已经被跟踪了3年,而且似乎不会很快解决。症状是为输入字段动态分配“类型”而不触发指令,并且当前复选框类型根本不起作用,而数字似乎可以正常工作。 一些信息在这里:

https://github.com/angular/angular/issues/7329

https://github.com/angular/angular/issues/11716

https://github.com/angular/angular/issues/13243

如果有新消息出现,我将更新此帖子。

原始帖子

在对象内部使用对象键绑定模型时,复选框输入字段不会绑定到值。

我为此准备了示例项目: (可测试的项目:https://github.com/MingyaoLiu/SVG-Polygon-Util/tree/master/SVG-Poly-Util/src/app/test-page

(该代码现在位于https://mingyaoliu.github.io/SVG-Polygon-Util/testPage的github页面上)

这是可以插入到空的angular 7项目中进行测试的代码。

.html

  
<button type="button" class="btn btn-warning" routerLink="/home">Go Back To Utility</button>
<div class="container">

    <div class="row">
        <div *ngFor="let objVal of objArray" style="padding: 10px">
            <hr />
            <label>{{obj[objVal].label}} input type ({{obj[objVal].inputType}}):&nbsp;</label>
            <br />
            <input [attr.type]="obj[objVal].inputType" [(ngModel)]="obj[objVal].value"
                placeholder="{{obj[objVal].label}}" (ngModelChange)="onChange($event)" />
        </div>
    </div>


    <div class="row">
        <div *ngFor="let objVal of obj2Array" style="padding: 10px">
            <hr />
            <label>Test Group:&nbsp;</label>
            <br />
            <input type="checkbox" [(ngModel)]="obj2[objVal]" (ngModelChange)="onChange($event)" />
        </div>
    </div>

    <hr />

    <div>
        {{ someInfo }}
    </div>

</div>

.ts

export class TestPageComponent implements OnInit {

    constructor() { }

    obj = {
        a: {
            label: 'A',
            inputType: 'number',
            value: 1
        },
        b: {
            label: 'B',
            inputType: 'checkbox',
            value: true
        },
        c: {
            label: 'C',
            inputType: 'checkbox',
            value: false
        },
    };

    obj2 = {
        checkbox2: true
    }

    objArray = Object.keys(this.obj);

    obj2Array = Object.keys(this.obj2);
    someInfo = '';
    ngOnInit() {
    }

    onChange(event) {
        this.someInfo += event;
    }

}

0 个答案:

没有答案