Question

代码：

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

Todo：

仅使两个组件之一可见。

在下面的代码中，两个选项卡一次都正确，...我试图一次打开一个选项卡

    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

仅使用一个道具和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";
    }
}

如何使用ngIf

3 个答案: