Question

我尝试过这样的事情：

 <input *ngIf="this.checkAll ? (this.undefinedDocuments$ | async)?.length > 0 : (!this.undefinedDocuments$ | async)?.length > 0" [checked]="this.checkAll" (click)="this.checkAll ? this.handleCheckAllClick() : this.handleUncheckAllClick()" class="styled-checkbox" id="checkAllCheckbox" type="checkbox">

但是它不起作用。我基本上希望将其用作“全部选中”和“全部取消选中”输入。

Answer 1

您无法在(click)事件中检查布尔值。您可以在component.ts中创建一个通用函数，并在(click)事件中调用该函数，并在该函数中选中this.checkAll并从那里调用this.handleCheckAllClick()和this.handleUnCheckAllClick()相应地。

HTML：

<input *ngIf="this.checkAll ? (this.undefinedDocuments$ | async)?.length > 0 : (!this.undefinedDocuments$ | async)?.length > 0" [checked]="this.checkAll" (click)="commonFuncion()" class="styled-checkbox" id="checkAllCheckbox" type="checkbox">

组件：

commonFunction() {
    if(this.checkAll) { this.handleCheckAllClick() } 
    else { this.handleUnCheckAllClick() }
}

Answer 2

只需反转您在单击时调用的功能即可。

当checkAll是true时，请致电this.handleUncheckAllClick()；当false是this.handleCheckAllClick()时，请致电

<input *ngIf="this.checkAll ? (this.undefinedDocuments$ | async)?.length > 0 : (!this.undefinedDocuments$ | async)?.length > 0" [checked]="this.checkAll" (click)="this.checkAll ? this.handleUncheckAllClick() : this.handleCheckAllClick()" class="styled-checkbox" id="checkAllCheckbox" type="checkbox">

将checkAll属性初始化为false

checkAll: boolean = false;

如何在Angular模板中通过三元运算符运行函数？

2 个答案: