NgModel не обновляет модель в флажке

Question

У меня есть модель, которая в основном представляет собой список объектов, и каждый из этих объектов содержит логическое значение.Эти логические значения должны обновляться пользователем, поэтому я написал компонент, который создает флажок для каждого объекта, а затем привязал этот флажок к модели позади него.

Это, однако, не работает!Если я установлю флажок, модель, с которой он связан, похоже, не будет обновляться вообще.

Чтобы проиллюстрировать мою проблему, я создал минимальный рабочий пример:

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'component-test',
    template: `
        <div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox ([ngModel])="item.checked"></ion-checkbox>
            </div>
        </div>
        <ion-button (click)="console_log()">print output</ion-button>
    `
})
export class TestComponent {
    @Input() data: any;

    console_log() {
        console.log(this.data);
    }
}


@Component({
    selector: 'page-test',
    template: `
        <ion-header>
            <ion-toolbar color="primary">
                <ion-title>
                    Test
                </ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <component-test [data]="params.data | async"></component-test>
        </ion-content>
    `
})
export class TestPage implements OnInit {

    params: any = {};

    async get_data() {
        return [{checked: false}, {checked: false}, {checked: false}];
    }

    ngOnInit() {
        this.params['data'] = this.get_data();
    }
}

Как вы можетесм .:

• данные асинхронно загружаются в родительский компонент (тест страницы)
• данные передаются компоненту теста (который содержит флажки) (тест компонента)
• Я добавил кнопку, которая выводит данные в консоль, чтобы проверить текущее состояние модели.

Ожидаемое поведение:

• при переключениифлажок, логическое значение в модели должно отражать состояние флажка и наоборот

Наблюдаемое поведение:

• Когда я переключаю флажок и выводим модель вконсоль, я не наблюдаю никаких изменений.

Answer 1

В конце концов у меня сработало (все остальные ответы действительны и хорошо работают), чтобы убедиться, что FormsModule импортирован в ваш модуль.

Если компонент загружен с отложенной загрузкой, он не даетсообщение об ошибке, но «ленивый модуль» все еще требует его.

Answer 2

Вы написали ngModel неправильно.Правильный способ синтаксиса двусторонней привязки:

[(attribute or prop)]

код:

<ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>

Answer 3

Ваш код правильный, но вы допустили небольшую ошибку ... ngModel должен быть записан как [(ngModel)] , а не ([ngModel]) известная строка: bananaв коробке не коробка в банане.:)

, поэтому код будет:

<div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
            </div>
        </div>

Answer 4

Синтаксис ngModel неверен, из-за этого значение флажка не связано, поэтому измените его следующим образом

<div *ngIf="!!data">
            <div *ngFor="let item of data">
                <ion-checkbox [(ngModel)]="item.checked"></ion-checkbox>
            </div>
        </div>