Блог

Мне нужно показать форму и скрыть форму с помощью ngif, когда событие щелчка происходит в флажке.

мой заголовок столбца и мой код значений столбцов

   <th><label class="btn btn-filter">
    <input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)"> status
  </label>amp;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>amp;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. Здесь выбранная обработка ($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/app/app.component.html

Моя ссылка на stackblitz. Когда я автоматически устанавливаю флажок состояния, другой флажок повторяет то же самое. Эту часть я выполнил. Что мне нужно, так это то, что я хотел отображать содержимое в теге div, когда флажок включен

вам необходимо сохранить состояние 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>amp;nbsp;

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

и измените свой обработчик, чтобы обновить модель:

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