当表单控件值在 angular 8 中更改时，复选框选中状态在运行时间未更改

Question

我有一个简单的应用程序，它只有一个复选框和一个按钮。当我单击按钮时，将启动一个计时器，并且在每 1 秒的循环中，它应该将复选框检查状态更改为选中和未选中。

为确保绑定的 formControl 的值正常工作，我添加了一个文本框并将相同的 formControl(isActive) 绑定到该文本框。

我的问题是：文本框上的值反复更改为 "true" 和 "false"，但复选框选中状态没有改变。

我的 app.component.html 看起来像这样。

<div name="dvMain" [formGroup]="formComponents">
  <input type="text" formControlName="isActive"/>
  <input type="checkbox" formControlName="isActive"/>
  Active
  <button (click)="start()">Start</button>
</div>

我的 app.component.ts 看起来像这样。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'checkbox-app';
  public formComponents : FormGroup;
  private interval;

  constructor(private formBuilder: FormBuilder){}

  ngOnInit(): void {
    this.formComponents = this.formBuilder.group({
      isActive:[false]
    });
  }

  public start():void{
    this.startTimer();
  }

  private startTimer(): void {
    let i: number = 0;
    this.interval = setInterval(() => {
      this.formComponents.patchValue({
        isActive: [i++ % 2 == 0]
      });
    }, 1000)
  }
}

我的app.module.ts看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请在stackblitz

中查看我的项目

Answer 1

在你的 startTimer() 中，去掉 isActive: [i++ % 2 == 0] 中的方括号，您的间隔应该可以正常工作：isActive: i++ % 2 == 0 或 isActive: (i++ % 2 == 0) 如果您希望括号使其更具可读性。

此外，如果您还想在手动单击复选框时更新文本框值，则可以在复选框上添加更改检测：

 <input type="checkbox" formControlName="isActive" (change)="onCheckChange($event)"/>

onCheckChange(e){
  this.formComponents.patchValue({
    isActive: e.target.checked
  });
}

当表单控件值在 angular 8 中更改时，复选框选中状态在运行时间未更改

Check box check state not changing at run time when form control value is changed in angular 8

angular

angular7

angular8

当表单控件值在 angular 8 中更改时，复选框选中状态在 运行 时间未更改

Check box check state not changing at run time when form control value is changed in angular 8

angular

angular7

angular8

当表单控件值在 angular 8 中更改时，复选框选中状态在运行时间未更改