如何使用 ngIf 一次使一个变量为真

Question

代码：

 <app-part [search]='search' *ngIf="isPart"></app-part>  
    <app-partlist [search]='search' *ngIf="isPartList"></app-partlist>

待办事项：

• 仅显示两个组件之一。

在下面的代码中，两个选项卡一次都为真，...我尝试一次打开一个选项卡

    getItem(search: Search) {
    if (search.item.startsWith("A") || search.item.startsWith("H") || search.item.startsWith("N") || search.item.startsWith("Q") || search.item.startsWith("R") && search.item.length == 11) {
      this.isPart = true
    }
    else if (search.item.startsWith("Z") || search.item.startsWith("V") || search.item.startsWith("X") || search.item.startsWith("G") && search.item.length == 9) {
      this.isPartList = true
    }
  }

Answer 1

当您将其他变量设置为 true 时，只需指定 false。

   getItem(search: Search) {
        if (search.item.startsWith("A") || search.item.startsWith("H") || search.item.startsWith("N") || search.item.startsWith("Q") || search.item.startsWith("R") && search.item.length == 11) {
          this.isPart = true;
          this.isPartList = false;
        }
        else if (search.item.startsWith("Z") || search.item.startsWith("V") || search.item.startsWith("X") || search.item.startsWith("G") && search.item.length == 9) {
          this.isPartList = true
          this.isPart = false;
        }
      }

Answer 2

这将一次只打开一个标签（使用单个变量），
在这种情况下：

• 两个组件的 dom 渲染都依赖于 isPart 变量。而且一次只有一个是真的。

• 如果您想要两个不同的变量，那么其他答案就是您需要的情况。

<app-part [search]='search' *ngIf="isPart"></app-part>  
        <app-partlist [search]='search' *ngIf="!isPart"></app-partlist>

Answer 3

只使用一个 prop 和 ngIfElse

<app-part [search]='search' *ngIf="isPart; else partList"></app-part>
<ng-template #partList>
    <app-partlist [search]='search'></app-partlist>
</ng-template>

还有getItem：

getItem(search: Search) {
    if (search.item.startsWith("A") || search.item.startsWith("H") || search.item.startsWith("N") || search.item.startsWith("Q") || search.item.startsWith("R") && search.item.length == 11) {
      this.isPart = true
    } else if (search.item.startsWith("Z") || search.item.startsWith("V") || search.item.startsWith("X") || search.item.startsWith("G") && search.item.length == 9) {
      this.isPart = false
    }
}

如果还需要解析多个类型，可以使用字符串标识符：

<app-part [search]='search' *ngIf="contnetType === 'part'"></app-part>
<app-partlist [search]='search' *ngIf="contnetType === 'list'"></app-partlist>

.

getItem(search: Search) {
    if (search.item.startsWith("A") || search.item.startsWith("H") || search.item.startsWith("N") || search.item.startsWith("Q") || search.item.startsWith("R") && search.item.length == 11) {
      this.contentType = "part";
    } else if (search.item.startsWith("Z") || search.item.startsWith("V") || search.item.startsWith("X") || search.item.startsWith("G") && search.item.length == 9) {
      this.contentType = "list";
    }
}