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中它没有定义。而且我不想使用大公式来计算长度，这就是我创建变量的原因。

我怎么能

将我的Typescript中的变量'value'传递给我的HTML，以便我可以使用*ngIf="value.length > 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"

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

2 个答案: