Angular中Checkbox点击事件控制表单显示隐藏的需求

嘿，我看你已经把全选/反选的核心功能搞定了，现在只需要调整下逻辑，就能实现勾选任意Checkbox时显示表单，所有Checkbox都取消勾选时隐藏表单的效果。咱们一步步来改：

先修正HTML里的小细节 #

你写的*ngif是拼写错误，要改成*ngIf才能让指令生效；另外全选Checkbox触发时，也要同步更新表单的显示状态：

<!-- 列头全选Checkbox -->
<th>
  <label class="btn btn-filter"> 
    <input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)"> 
    status 
  </label>&nbsp;
</th>

<!-- 列内单个Checkbox -->
<td>
  <ng-container *ngFor="let trd of trade"> 
    <label class="btn btn-filter"> 
      <input type="checkbox" name="trades" [checked]="trd.selected" (change)="handleSelected()">
      {{ trd.label}} 
    </label>&nbsp; 
  </ng-container>
</td>

<!-- 需控制显示隐藏的表单 -->
<div *ngIf="isCheck"> 
  <mat-form-field class="example-full-width" > 
    <input class="toolbar-search" type="text" matInput autocomplete="off" > 
    <mat-placeholder>Name</mat-placeholder> 
  </mat-form-field> 
  <mat-form-field class="example-full-width" > 
    <input class="toolbar-search" type="text" matInput autocomplete="off">
    <mat-placeholder>City</mat-placeholder> 
  </mat-form-field> 
</div>

再完善TypeScript的逻辑 #

现在需要覆盖两种场景的状态同步：全选/反选时的批量状态，以及单个Checkbox点击时的独立状态：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  trade = [ { label: ' Check', selected: false } ];
  isCheck = false; // 初始化表单为隐藏状态

  allTrades(event) {
    const checked = event.target.checked;
    this.trade.forEach(item => item.selected = checked);
    // 全选时直接显示表单，全不选时隐藏
    this.isCheck = checked;
  }

  handleSelected() {
    // 检查数组中是否存在至少一个选中的项
    const hasSelectedItem = this.trade.some(item => item.selected);
    this.isCheck = hasSelectedItem;
  }
}

逻辑说明 #

• 全选函数allTrades：设置完所有项的选中状态后，直接把isCheck同步为全选的状态（勾选则显示，取消则隐藏）
• 单个点击函数handleSelected：用Array.some()方法判断是否还有选中的项，只要有一个选中就显示表单；所有项都取消勾选时，自动隐藏表单

这样不管是全选、反选，还是单个勾选/取消操作，表单的显示状态都会和Checkbox的选中状态完美同步啦！

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