我有一个搜索栏,我想在输入值长度为 2 或更长时显示所有过滤后的名称。
我设法从输入字段中获取了 value.length
。现在我卡住了。
起初我做了:
if (value.length >= 2){
showNames: true;
}
默认 showNames
为 false。当长度为 2 或更高时,它设置为 true。所以,这是有效的。只有当用户删除文本时,value.length 再次低于 2, boolean 值才不会再次变为 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>
我知道我可以通过单击按钮来切换 boolean 值,但我只想通过值的长度来切换它。
*ngIf="value.length >= 2"
也不起作用,因为我在 Typescript 中创建了变量“value”。所以在我的 HTML 中它没有定义。而且我不想使用大公式来计算长度,这就是我创建变量的原因。
我该怎么办
- 将变量“value”从我的 Typescript 传递到我的 HTML,这样我就可以使用
*ngIf="value.length > 2"
? - 或者在我的 Typescript 中做某种 If/Else,这样我就可以在我的 HTML 中使用像
*ngIf="showNames"
这样的单个 boolean 值?
最佳答案
您可以像这样绑定(bind)到搜索栏的模型:
<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 = "";
// ...
}
关于javascript - Angular 2 : Toggle Boolean based on a condition,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38226334/