Question

使用ngFor内的复选框时，

ngModal似乎不起作用，而重复

之类的对象数组

[{“ checked”：true}，{“ checked”：false}]

如果我们将组件的checked属性更改为true或false，则它不会反映在UI中，相同的逻辑将适用于md bootstrap的mdb-checkbox。

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版本：

   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

好的，我有解决方案。显然，Angular在内部不会将检查状态视为布尔值。

我做了以下事情：

我在结束标记</div>的紧后面添加了一个按钮到您的HTML文件。只是出于测试目的。

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

在TypeScript文件中，我添加了具有以下内容的切换方法。

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

这可以解决问题。

Answer 2

好的，那么你就到这里。这是您对stackblitz进行的修改和注释。

要实现目标，您可以做的是暂时记住当前单击复选框的索引。我是通过变量marker完成的。

我不建议您先等ngAfterViewChecked()钩之后再开始操作该框，因为这样可以确保如果页面变慢时不会出现任何计时问题。

下一步是检查标记是否已设置。然后，您必须将实际的切回代码包装为超时功能。如果不这样做，则会遇到此错误：

ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'model：true'。当前值：“型号：假”。

就是这样。

您可以尝试进一步减少超时，以使复选框甚至不闪烁。但是请务必注意，如果您采取行动得太快，就有可能遇到上述错误。

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);
    }
  }
}

ngModal不适用于ngFor中的输入类型复选框

2 个答案: