ngModal не работает для флажка типа ввода внутри ngFor

Question

ngModal, кажется, не работает при использовании флажка внутри ngFor, в то время как повторение массива объектов типа

[{ "проверено": истинно}, { "проверено" ложь}]

Если мы изменили свойство selected на true или false из компонента, это не отражается в пользовательском интерфейсе, та же логика будет работать для mdb-checkbox md bootstrap.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  sampleObj = [
    {'checked': false, name: 'option 1'},
    {'checked': false, name: 'option 2'},
    {'checked': false, name: 'option 3'},
    {'checked': true, name: 'option 4'}
  ];

  sampleFunc(event, i) {
    if (event.currentTarget.checked) {
      alert(i);
      this.sampleObj[i].checked = false;
    }
  }
}

app.component.html

  <div *ngFor="let item of sampleObj; let i = index">
  <input type='checkbox' name='item{{i}}' [(ngModel)]="item.checked" (change)="sampleFunc($event, i)" /> 
  <label for='item{{i}}'><span>{{item.name}}</span></label>

</div>

Рабочий пример https://stackblitz.com/edit/angular-3orv4w

Угловая версия:

   Angular CLI: 7.1.1
Node: 10.14.2
OS: win32 x64
Angular: 7.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.1.1
@angular-devkit/schematics        7.1.1
@angular/pwa                      0.11.2
@angular/service-worker           7.1.2
@ngtools/webpack                  7.2.1
@schematics/angular               7.1.1
@schematics/update                0.11.1
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Answer 1

Хорошо, так что вот, пожалуйста. Это ваш класс стекаблица, измененный и прокомментированный.

То, что вы можете сделать для достижения своей цели, - это временно запомнить индекс установленного в данный момент флажка. Я сделал это с переменной marker.

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

Следующий шаг - проверить, был ли установлен маркер. А затем вы должны обернуть свой реальный код возврата в функцию тайм-аута. Если вы этого не сделаете, вы столкнетесь с этой ошибкой:

ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: 'модель: правда'. Текущее значение: 'модель: ложь'.

Вот и все.

Вы можете попытаться уменьшить тайм-аут дальше, чтобы флажок даже не мигал. Но всегда помните о том, что вы можете столкнуться с вышеупомянутой ошибкой, если будете действовать слишком быстро.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // the clicked checkbox's index
  private marker: number = -1;

  sampleObj = [
    {'checked': false, name: 'option 1'},
    {'checked': false, name: 'option 2'},
    {'checked': false, name: 'option 3'},
    {'checked': true, name: 'option 4'}
  ];

  sampleFunc(event, i) {
    if (event.currentTarget.checked) {
      // memorize the clicked checkbox's index
      this.marker = i;
    }
  }

  toggle() : void {
    this.sampleObj[1].checked = !this.sampleObj[1].checked; 
  }

  ngAfterViewChecked(): void {
    // if a marker is set
    if (this.marker > -1) {
      // start the timeout and then reset the checkbox
      setTimeout (() => {
      this.sampleObj[this.marker].checked = !this.sampleObj[this.marker].checked;
      this.marker = -1;
      }, 20);
    }
  }
}

Answer 2

Хорошо, у меня есть решение. Очевидно, Angular не рассматривает проверенное состояние как булево внутренне.

Я сделал следующее:

Я добавил кнопку в ваш HTML-файл сразу после закрывающего тега </div>. Только для целей тестирования.

<button (click)="toggle()">click me</button>

В TypeScript-файле я добавил метод переключения со следующим содержимым.

toggle(): void {
    this.sampleObj[1].checked = !this.sampleObj[1].checked; 
}

И это помогает.