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,所以我可以*ngIf="showNames"在我的HTML中使用一个布尔值？

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 = "";

    // ...
}