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