复选框中的单击事件

Question

当复选框中发生单击事件时，我需要使用 ngif 显示和隐藏表单。

我的列标题和我的列值代码

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

我有状态栏名称，并且附近有一个复选框

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

我有状态列的值，并且我以这样的方式编写，当我单击列标题中的复选框时，列中的所有复选框值都会启用，反之亦然

启用复选框时我想显示的内容

我需要的是当复选框被启用时我想显示这个 html 块的内容，当复选框被禁用时它应该被隐藏。

    <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>

我的 ts。这里的 handleSelected($event) 是我试图隐藏 html 的点击事件函数

 trade = [
  { label: ' Check', selected: false }, 

];



 allTrades(event) {
      const checked = event.target.checked;
      this.trade.forEach(item => item.selected = checked);
    }



handleSelected($event) {
  if ($event.target.checked === true) {
  // Handle your code
  this.ischeck=true

  }

}

注意：此处编写的复选框代码的方式是，我在列名附近有一个复选框，当我启用它时，列值中的所有复选框都会启用，反之亦然。

https://stackblitz.com/edit/angular-ivy-zahy1b?file=src%2Fapp%2Fapp.component.html

我的 stackblitz 链接。当我自动单击状态复选框时，另一个复选框重复相同。那部分我已经完成了。我需要的是，当复选框被启用时，我想在 div 标签中显示内容

Answer 1

你需要在你使用的模型中保存checked的状态，而不是单独的isChecked变量...

这是一个可行的解决方案 https://stackblitz.com/edit/angular-ivy-kfycuc

将 div 移动到ng-container

<ng-container *ngFor="let trd of trade">
  <label class="btn btn-filter">
    <input type="checkbox" name="trades" [checked]="trd.selected"  (change)="handleSelected($event, trd)">{{ trd.label}}
  </label>&nbsp;

  <div *ngIf="trd.selected">
    <h1>Heey</h1>
  </div>
</ng-container>

并更改您的处理程序以更新模型：

handleSelected($event, trd) {
  trd.selected = $event.target.checked;
}