ngIf 与多个 || (OR) 条件不起作用答案

【问题标题】：ngIf with multiple || (OR) conditions not workingngIf 与多个 || (OR) 条件不起作用
【发布时间】：2019-11-27 12:13:38
【问题描述】：

我在设置多条件 ngIf 时遇到问题。它在嵌套 <ng-container>s 时每个条件都有效，但当我尝试仅使用一个包含所有条件的容器时则无效。

代码：

// This doesn't work
<ng-container *ngIf="
      !(estadoReparacionValue === 'ANULADA') ||
      !(estadoReparacionValue === 'ENTREGADO') ||
      !(estadoReparacionValue === 'ENTREGADO PARA BAJA') ||
      !(estadoReparacionValue === 'DERIVADO A REZAGOS P/BAJA')">
    <!-- Things happen here -->
</ng-container>


// This doesn't work either
<ng-container *ngIf="
    estadoReparacionValue !== 'ANULADA' ||
    estadoReparacionValue !== 'ENTREGADO' ||
    estadoReparacionValue !== 'ENTREGADO PARA BAJA' ||
    estadoReparacionValue !== 'DERIVADO A REZAGOS P/BAJA'">
    <!-- Things happen here -->
</ng-container>


// This works
<ng-container *ngIf="estadoReparacionValue !== 'ANULADA' ||">
    <ng-container *ngIf="estadoReparacionValue !== 'ENTREGADO'">
        <ng-container *ngIf="estadoReparacionValue !== 'ENTREGADO PARA BAJA'">
            <!-- Things happen here -->
        </ng-container>
    </ng-container>
</ng-container>

变量和条件检查工作正常，因为最后一个示例确实有效，但当我像前两个示例一样执行此操作时，它根本不起作用。

简而言之，我想让 ngIf 只使用一个 <ng-container>

【问题讨论】：

你需要 AND，而不是 OR。
查看 tkausl 的评论。在前两个容器定义中有|| 的任何地方都使用&&
@tkausl 的建议似乎效果很好，但为什么呢？我应该检查其中至少一个是否不存在，而不是同时检查。我错过了什么吗？
记住视图不应该与逻辑冲突，你真的想在视图中应用逻辑。
好点，我以@maury844 的建议为例。这可能是处理这个问题的更好方法。

标签： angular

【解决方案1】：

你为什么不在component.ts中做~~OR~~ AND然后你在HTML中请求变量？

get shouldShow() {
  return estadoReparacionValue !== 'ANULADA' &&
    estadoReparacionValue !== 'ENTREGADO' &&
    estadoReparacionValue !== 'ENTREGADO PARA BAJA' &&
    estadoReparacionValue !== 'DERIVADO A REZAGOS P/BAJA';
}

<ng-container *ngIf="shouldShow" > 
  ... 
</ng-container>

【讨论】：

【解决方案2】：

你需要检查&& tkausl 指出，那么结果条件将是..

<ng-container *ngIf=" estadoReparacionValue &&
    estadoReparacionValue !== 'ANULADA' &&
    estadoReparacionValue !== 'ENTREGADO' &&
    estadoReparacionValue !== 'ENTREGADO PARA BAJA' &&
    estadoReparacionValue !== 'DERIVADO A REZAGOS P/BAJA'">
    <!-- Things happen here -->
</ng-container>

我应该检查其中至少一个是否不存在，而不是同时检查。

如果我理解正确，您也可以为此编写 else 块

 <ng-container *ngIf=" condition ; else anotherBlock>

 ...
 <ng-container #anotherBlock></ng-container>
 ...

【讨论】：