Как сделать одну переменную true одновременно используя 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

Используйте только одну опору и 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";
    }
}

Answer 2

Это откроет только одну вкладку за раз (используя одну переменную),
В этом случае:

• оба компонента дом рендеринга зависит от isPart переменная. И за один раз только одна правда.

• если вам нужны две разные переменные, тогда другой ответ - ваш обязательный случай.

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

Answer 3

Просто назначьте false, когда вы делаете другую переменную как true.

   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;
        }
      }