和运算符 ( && ) 在 Angular 中不起作用

Question

我有使用 blockui 打开对话框的按钮 feature.I 想要关闭对话框并将 blockui 布尔变量设置为 false 以便在我的 html 代码中不阻塞 ui.But (click)="blockedDialog=false && displayAddDialog=false"这里只工作第一个所以 (blockedDialog=false) 第二个 (displayAddDialog=false) 不是 working.How 我可以在不使用方法 call.I 的情况下做到这一点意味着我们不能用 [= 中的 && 运算符来做到这一点24=]?

我的html对话代码：

<p-button [label]="'ekle' | translate" icon="pi pi-plus" (click)="showAddDialog()"></p-button>
<p-blockUI [blocked]="blockedDialog"></p-blockUI>
<p-dialog header="Godfather I" [(visible)]="displayAddDialog" [style]="{width: '50vw'}" [baseZIndex]="10000">
        The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the
        nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.

    <p-footer>
        <button type="button" pButton icon="pi pi-check" (click)="blockedDialog=false && displayAddDialog=false" label="Yes"></button>
        <button type="button" pButton icon="pi pi-times" (click)="blockedDialog=false && displayAddDialog=false" label="No" class="ui-button-secondary"></button>
    </p-footer>
</p-dialog>

我的 Ts：

export class CustomerComponent implements OnInit {
  displayAddDialog: boolean;
  blockedDialog: boolean = false;
ngOnInit(): void {
this.displayAddDialog = false;
}

showAddDialog() {
    this.displayAddDialog = true;
    this.blockedDialog = true;
  }
}

Answer 1

blockedDialog = false会解析为false，所以会短路终止。如果你想让它继续，你应该使用 ||:

blockedDialog = false || displayAddDialog = false

另一个更好的方法是用 ;:

分隔语句

blockedDialog = false; displayAddDialog = false;

最好和最语义化的方法是创建一个 hideAddDialog 方法，因为您还有一个 showAddDialog

Answer 2

因为第一个表达式 returns false 和第二个表达式在那之后没有计算。因此永远不会设置第二个表达式。

改为使用方法调用，并在该方法中设置这两个变量。

是的，否则请使用 ; 分隔两个表达式，正如 Poul Kruijit 在另一个答案中提出的那样。

替代方法

(click)="hideDialog()"

在组件ts文件中

hideDialog(){
  this.blockedDialog = false;
  this.displayAddDialog = false;
}

和运算符 ( && ) 在 Angular 中不起作用

and operator ( && ) not working in Angular

primeng

angular