Модель входного флажка не привязана к вложенному объекту

Question

Обновление

Это ошибка в anuglar начиная с angular 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)

(код теперь доступен на страницах github здесь: https://mingyaoliu.github.io/SVG-Polygon-Util/testPage)

Вот код, который можно подключить к пустому угловому проекту 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;
    }

}