Angular 4如何通过[(ngModel)]获取表格多行开关组件状态并实现过滤

明确说一句：完全可以实现，核心是让你的自定义开关组件支持Angular的双向绑定，再配合数组对象存储每行状态即可，下面是具体步骤：

1. 让自定义开关组件支持双向绑定 #

要和[(ngModel)]配合，你的自定义组件需要满足Angular的双向绑定规则，这里有两种常用方式：

方式一：基于@Input()+@Output()的简易双向绑定 #

这种方式最直观，适合简单的开关组件：

// custom-switch.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-custom-switch',
  template: `
    <!-- 这里替换成你客户提供的自定义开关UI -->
    <button class="custom-switch" (click)="toggleSwitch()">
      {{ checked ? '开' : '关' }}
    </button>
  `
})
export class CustomSwitchComponent {
  // 接收外部传入的开关状态
  @Input() checked: boolean = false;
  // 向外发射状态变化事件，命名必须是`[input属性名]Change`，才能配合[(ngModel)]
  @Output() checkedChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  toggleSwitch() {
    this.checked = !this.checked;
    // 把新状态传给父组件
    this.checkedChange.emit(this.checked);
  }
}

方式二：实现ControlValueAccessor接口（规范表单控件方式） #

如果你的开关需要配合表单组使用，推荐这种方式，它能让组件完全兼容Angular的表单体系：

// custom-switch.component.ts
import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-switch',
  template: `
    <!-- 替换成客户提供的自定义开关UI -->
    <button class="custom-switch" (click)="toggleSwitch()">
      {{ innerValue ? '开' : '关' }}
    </button>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomSwitchComponent),
      multi: true
    }
  ]
})
export class CustomSwitchComponent implements ControlValueAccessor {
  private innerValue: boolean = false;
  private onChange: (value: boolean) => void = () => {};
  private onTouched: () => void = () => {};

  toggleSwitch() {
    this.innerValue = !this.innerValue;
    this.onChange(this.innerValue);
    this.onTouched();
  }

  // 接收外部传入的值
  writeValue(value: boolean): void {
    if (value !== undefined) {
      this.innerValue = value;
    }
  }

  // 注册状态变化回调
  registerOnChange(fn: (value: boolean) => void): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }
}

2. 在表格中绑定每行的开关状态 #

假设你有一个数据源数组，每个元素包含一个存储开关状态的属性（比如isEnabled），在表格的*ngFor循环中直接把[(ngModel)]绑定到这个属性即可：

父组件模板（比如table.component.html） #

<table class="data-table">
  <thead>
    <tr>
      <th>项目名称</th>
      <th>启用状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环遍历数据，每行绑定对应的开关状态 -->
    <tr *ngFor="let item of dataList; let i = index">
      <td>{{ item.name }}</td>
      <td>
        <app-custom-switch [(ngModel)]="item.isEnabled"></app-custom-switch>
      </td>
    </tr>
  </tbody>
</table>

<!-- 测试过滤功能的按钮 -->
<button (click)="showEnabledItems()">查看已启用的项目</button>

父组件类（table.component.ts） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  // 模拟业务数据源，每个item自带isEnabled属性存储开关状态
  dataList = [
    { name: '客户管理模块', isEnabled: true },
    { name: '订单统计模块', isEnabled: false },
    { name: '库存预警模块', isEnabled: true }
  ];

  showEnabledItems() {
    // 根据开关状态过滤数据
    const enabledItems = this.dataList.filter(item => item.isEnabled);
    console.log('已启用的项目：', enabledItems);
    // 这里可以把过滤后的结果用于渲染、接口请求等业务逻辑
  }
}

3. 关键注意事项 #

• 必须在你的模块中导入FormsModule，因为[(ngModel)]依赖这个模块：

  // app.module.ts
  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // ...其他模块
      FormsModule
    ],
    declarations: [
      CustomSwitchComponent,
      TableComponent
    ]
  })
  export class AppModule { }
  

• 如果自定义开关组件在单独的模块中，要确保该模块导出组件，或者在使用的模块中正确导入。

这样一来，每行开关的状态会自动同步到dataList中对应的isEnabled属性，你随时可以根据这个属性进行数据过滤或者其他业务操作~

内容的提问来源于stack exchange，提问作者stec1