1

我有一个简单的应用程序，它有一个复选框和一个按钮。当我单击按钮时，将启动一个计时器，并且在每 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中查看我的项目

4

1 回答 1

2

在您的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
  });
}
于 2019-06-14T07:17:19.727 回答