angular - Angular 7 ng-if="" 组合条件

Question

如何在 Angular 7 中组合条件？

此代码似乎不起作用：

<div *ngIf="isSituation1 || (isSituation3 &&  isSituation2)" [@slideInOut]   role="alert">
<h1>
  Show this if either condition is true
</h1>
</div>

我想在以下情况下显示内容： isSituation1 = true 或 isSituation3 AND isSituation2 = true

标签： angularmultiple-conditions

Answer 1

模板似乎是正确的：

<!-- app.component.html -->

<div *ngIf="isSituation1 || (isSituation3 &&  isSituation2)" [@slideInOut]   role="alert">
    <h1>Show this if either condition is true</h1>
</div>

JS 应该包括这样的内容：

// app.component.ts

export class AppComponent implements OnInit {
    isSituation1: boolean = false;
    isSituation2: boolean = false;
    isSituation3: boolean = false;

    // perhaps some logic to check if one of the situations

    ngOnInit() {
        if (someCondition) {
            isSituation1 = true;
        } else if (anotherCondition) {
            isSituation2 = true;
        } else {
            isSituation3 = true;
        }
    }
}

绝对添加一些console.log()语句来检查这些值。另外——如果碰巧isSituation1-3是函数，请将括号添加到 html 模板isSituation1() || (isSituation2 && isSituation3)。