Question

有人可以告诉我我在做什么错吗？

（角度6）

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

我在表格下方有一个目录，其中在thead中有一个主复选框，如果单击该复选框，则会选中表格中的所有复选框。

 <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                <thead>
                    <tr>
                        <th><mat-checkbox class="example-margin" (change)="selectAllCb($event.checked)"></mat-checkbox></th>
                        <th>Nº Protocolo</th>
                        <th>Resumo</th>
                        <th>Interessado</th>
                        <th>Tipo</th>
                        <th>Data Cadastro</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let documento of documentos, let i = index">
                        <td><mat-checkbox [ngModel]="selectAll"(change)="onChangeCheckBox($event.checked,documento?.id)"></mat-checkbox>
                            </td>
                        <td id="codigo">{{documento?.codigo}}/{{documento?.ano}}</td>
                        <td id="resumo">{{documento?.resumo}}</td>
                        <td id="interessado">{{documento?.interessado}}</td>
                        <td id="tipo">{{documento?.tipoDocumento?.nome}}</td>
                        <td id="data">{{documento?.dataCadastro | date: 'dd/MM/yyyy HH:mm'}}</td>
                        <td id="acoes">
                            <div class="row">
                                <button class="badge badge-light" [routerLink]="['/documentos/detalhe/',documento?.id]">
                                    <i class="material-icons" title="Editar protocolo">edit</i>
                                </button>
                                <button class="badge badge-light" (click)="gerarEtiqueta(documento?.id)">
                                    <i class="material-icons" title="Imprimir Etiqueta">print</i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

主复选框设置了selectAll：布尔属性，该表的其余复选框通过[ngModel]使用该属性。 ngfor生成的复选框在单击时会将值传递给组件。

export class DocumentosComponent implements OnInit, OnDestroy, AfterViewInit {
  selectAll: boolean = false;
constructor(){}

ngOnInit() {}

 selectAllCb(isChecked: boolean) { 
      this.selectAll = isChecked;

  }
}

但是，通过属性绑定更改复选框的值时，不会触发更改事件。

Answer 1

可能是，$ event.checked返回未定义。尝试不要运算符。

selectAllCb(state: boolean){
    console.log('called', state);
    this.selectAll = !this.selectAll;
}

如果仍然不起作用。您可以手动调用CD。

constructor(private cd: ChangeDetectorRef){} 
this.cd.markForCheck();

带有复选框的细节

1 个答案: