Angular 2：根據條件切換布爾值

Question

我有一個搜索欄，我想在輸入值長度為2或更長時顯示所有過濾的名稱。

我設法從輸入字段中獲取value.length 。 現在我被卡住了。 起初我做了：

if (value.length >= 2){
  showNames: true;
} 

默認showNames為false。 當長度為2或更高時，它設置為true。 所以，那是有效的。 只有當用戶擦除文本時，value.length再次低於2，布爾值才會再次變為false。 我試過了，但我知道在Angular 2中不正確。

<ion-searchbar (ionInput)="getNames($event)"></ion-searchbar>
<ion-list *ngIf="showNames">
   <ion-item *ngFor="let name of names">
     {{ name }}
   </ion-item>
</ion-list>

我知道我可以通過按鈕點擊來切換布爾值，但我只想從值的長度切換它。

*ngIf="value.length >= 2"也不起作用，因為我在我的Typescript中創建變量'value'。 所以在我的HTML中它沒有定義。 而且我不想使用大公式計算長度，這就是我創建變量的原因。

我怎么能

1. 將我的Typescript中的變量'value'傳遞給我的HTML，這樣我可以使用*ngIf="value.length > 2" ？
2. 或者在我的Typescript中做一些If / Else，所以我可以在我的HTML中使用像*ngIf="showNames"這樣的單一布爾值？

Answer 1

您可以像這樣綁定到搜索欄的模型：

<ion-searchbar [(ngModel)]="searchValue" (ionInput)="getNames($event)"></ion-searchbar>
<ion-list *ngIf="searchValue.length >= 2">
   <ion-item *ngFor="let name of names">
     {{ name }}
   </ion-item>
</ion-list>

並在您的組件中定義這樣一個變量：

export class ComponentA {
    searchValue: string = "";

    // ...
}

Answer 2

你可以讓showNames成為一個函數，並且目標是做*ngIf="showNames()" ，或者如果是那么短，那么就執行檢查： *ngIf="value.length >= 2"