角 6 复选框动态检查 - TypeScript

在 Angular 中使用角 6 多选框时，我们经常需要动态检查其状态并相应地更新用户界面。这个任务在 TypeScript 中很容易实现。在这篇文章中，我们将介绍如何使用 TypeScript 实现 Angular 中的角 6 多选框动态检查。

准备工作

首先，我们需要创建一个新的 Angular 应用程序。我们可以使用 Angular CLI 来创建一个新的 Angular 应用。

ng new my-app
cd my-app

接下来，我们需要安装角 6 多选框的依赖项。

npm install @angular/material @angular/cdk --save

然后，在 app.module.ts 文件中，我们需要将 BrowserAnimationsModule 和 MatCheckboxModule 引入到我们的应用程序中。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [BrowserAnimationsModule, MatCheckboxModule],
  exports: [MatCheckboxModule],
})
export class AppModule {}

动态检查多选框状态

为了动态检查多选框的状态，我们需要使用 Angular 模板引用变量。我们可以使用 # 号来创建一个引用变量。

<mat-checkbox #checkbox1 (change)="onChange()">Checkbox 1</mat-checkbox>
<mat-checkbox #checkbox2 (change)="onChange()">Checkbox 2</mat-checkbox>
<mat-checkbox #checkbox3 (change)="onChange()">Checkbox 3</mat-checkbox>

我们可以将模板引用变量传递给一个方法，以便我们可以在该方法中访问复选框的状态。在这个例子中，我们将每个多选框的模板引用变量传递给一个名为 onChange() 的方法。

接下来，我们需要在组件类中定义 onChange() 方法。

import { Component, ViewChild } from '@angular/core';
import { MatCheckbox } from '@angular/material/checkbox';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('checkbox1', { static: false }) checkbox1: MatCheckbox;
  @ViewChild('checkbox2', { static: false }) checkbox2: MatCheckbox;
  @ViewChild('checkbox3', { static: false }) checkbox3: MatCheckbox;

  onChange(): void {
    console.log(`Checkbox 1: ${this.checkbox1.checked}`);
    console.log(`Checkbox 2: ${this.checkbox2.checked}`);
    console.log(`Checkbox 3: ${this.checkbox3.checked}`);
  }
}

在组件类中，我们必须使用 @ViewChild 装饰器来引用在模板中定义的复选框。然后，在 onChange() 方法中，我们可以使用这些引用来访问多选框的状态。

结论

在 Angular 中使用角 6 多选框时，我们可以使用 TypeScript 和模板引用变量来动态检测多选框的状态。我们可以通过将模板引用变量传递给一个方法，然后在该方法中访问多选框的状态来实现这一点。