角度 2:根据条件切换布尔值

Angular 2 : Toggle Boolean based on a condition

本文关键字：布尔值 条件 角度      更新时间：2023-09-26

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

我设法将value.length从输入字段中移出。现在我被困住了。起初我做了：

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

默认showNames为假。当长度为 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"也不起作用，因为我在打字稿中创建了变量"值"。所以在我的 HTML 中没有定义它。而且我不想使用大公式来计算长度，这就是我创建一个变量的原因。

我怎么能

  1. 将变量"值"从我的打字稿传递到我的 HTML，以便我可以使用*ngIf="value.length > 2"？
  2. 或者在我的打字稿中做某种 If/Else，这样我就可以在我的 HTML 中使用像 *ngIf="showNames" 这样的布尔值？

您可以像这样绑定到搜索栏的模型：

<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 = "";
    // ...
}
你可以

showNames一个函数并旨在做*ngIf="showNames()"，或者如果它很短，请在那里执行检查：*ngIf="value.length >= 2"

相关文章：