Angular 2：根据条件切换布尔值

Question

我有一个搜索栏，当输入值长度为2或更长时，我想显示所有过滤后的名称。

我已经成功获取了输入字段中的value.length。现在我卡住了。 起初我做了以下操作：

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

默认情况下，showNames的值为false。当长度大于或等于2时，它会被设置为true，所以这是有效的。只有当用户删除文本，使得值的长度再次小于2时，布尔值才不会再次变为false。我尝试了if else语句，但我知道在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. 将变量'value'从我的Typescript传递到我的HTML中，这样我就可以使用*ngIf="value.length > 2"？
2. 或者在我的Typescript中进行一些If / Else处理，这样我就可以在我的HTML中使用一个单独的布尔变量，如*ngIf="showNames"？

- J.DD

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

    // ...
}

- Maximilian Riegler

Answer 2

你可以将 showNames 定义为一个函数，然后在模板中使用 *ngIf="showNames()"，或者如果代码很短，可以直接在那里进行检查：*ngIf="value.length >= 2"。

- GMaiolo