Question

我在设置多条件ngIf时遇到问题。当将<ng-container>分别嵌套一个条件时，此方法有效，但是当我尝试仅将一个容器与所有条件一起使用时，则无效。

代码：

// 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>

Answer 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>

Answer 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>
 ...

ngIf具有多个|| （OR）条件不起作用

2 个答案: