[英]Typing in a input text is very slow using angular 4
When I type in text to search something, displaying one character in text is very slow.当我输入文本进行搜索时,在文本中显示一个字符的速度非常慢。 What is the problem ?有什么问题? I have display 50 products with ngFor
as below , if I display more than 50 products 100 or 150 typing in text is more slow.我用ngFor
显示了 50 个产品,如下所示,如果我显示超过 50 个产品,则 100 或 150 输入文本会更慢。 what should I do to fix this problem ?我该怎么做才能解决这个问题?
<div class="width_products products-animation " *ngFor="let product of productsService.products ; trackBy: $index" [ngClass]="{ 'width_products_open_menu':productsService.status_menu }" >
<span class="each_width_product" >
<div class="title_products more_detail_product" (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">
{{product.product_title }}
<span class="glyphicon glyphicon-chevron-down"></span><br>
<div class=' glyphicon glyphicon-time'></div> {{product.product_date}}
</div>
<div class="image_product_primary " (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })">
<img class="image_product" src="../../assets/images/products_image/{{product.product_image}}">
</div>
<button (click)="product.product_in_wishList='true'; productsService.add_wish_list( product )" mat-button class="wish_list notCloseDropdawnFavorite notCloseDropdawnCard">
<span class="write_add_wish">{{dataservices.language.add_wishlist}}</span>
<mat-icon *ngIf="product.product_in_wishList == 'false' " class="notCloseDropdawnFavorite notCloseDropdawnCard">favorite_border</mat-icon>
<mat-icon *ngIf="product.product_in_wishList == 'true' " class="hearts_div_hover notCloseDropdawnFavorite notCloseDropdawnCard">favorite</mat-icon>
</button>
<div class="footer_products">
<span matTooltip="Views!">
<div class="button_footer_products">
<span class="glyphicon glyphicon-eye-open icon_eye"></span>
<div class="both_write ">
12889
</div>
</div>
</span>
<span matTooltip="Add to your card" class="notCloseDropdawnCard notCloseDropdawnFavorite " (click)="product.product_in_cartList='true'; productsService.add_cart_list( product )">
<div class="button_footer_products">
<span *ngIf="product.product_in_cartList=='false'" class="glyphicon glyphicon-plus icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" ></span>
<span *ngIf="product.product_in_cartList=='true'" class="glyphicon glyphicon-ok icon_eye notCloseDropdawnCard notCloseDropdawnFavorite" ></span>
<div class="both_write ">
Cart
</div>
</div>
</span>
<span matTooltip="See Details!">
<div (click)="set_router({ path:product['company'].company_name+'/'+product.product_title , data:product.product_id , relative:true })" class="button_footer_products" >
<span class=" glyphicon glyphicon-option-horizontal icon_eye"></span>
<div class="both_write ">
More
</div>
</div>
</span>
</div>
<div class="prise_products">
Price:<del>$2500</del> $3500
</div>
<div class="plus_height"></div>
</span>
</div>
In header component I have a input type text as below :在标题组件中,我有一个输入类型文本,如下所示:
<input type="text" class="kerkim" name="search" [(ngModel)]="typing_search" placeholder="
{{dataservices.language.searchproducts}}">
Debouce effect, eg do not run search immediately. Debouce 效应,例如不要立即运行搜索。
class Coponent {
private _timeoutId: number;
//to be called on search text changed
search(){
clearTimeout(this._timeoutId);
this._timeoutId = setTimeout(() => {
//do search stuff
}, 500) //play with delay
}
}
Cache prev results using search keyword.使用搜索关键字缓存上一个结果。 When kyeword changes like so ["k","ke","key"] you do not need to refilter whole array.当关键字像这样 ["k","ke","key"] 更改时,您不需要重新过滤整个数组。
class Search {
private _keywordChanges:string[] = [];
private _prevFilterResults: any[] = [];
private _allData: any[] = [];
search(keyword:string){
let prevKeyword = this.getPrevKeyword(),
toBeFiltered: any[];
if(keyword.match(keyword)){ //if it was "ke" and now it is "key"
//filter prev results only
toBeFiltered = this._prevFilterResults;
} else {
//filter prev results or even make cache for keyword
toBeFiltered = this._allData;
}
let results = toBeFiltered.filter(() => {});
this._prevFilterResults = results;
}
private getPrevKeyword(){
return this._keywordChanges[this._keywordChanges.length - 1];
}
Use for with break instead of Array.filter(), in some cases it may be helpfull.使用 for with break 而不是 Array.filter(),在某些情况下它可能会有所帮助。 For example you have sorted array ["a","apple","b","banana"] and keyword "a".例如,您已经对数组 ["a","apple","b","banana"] 和关键字 "a" 进行了排序。
function search(array:any[], keyword:string) {
//so
let results = [];
for(let i = 0; i < array.length; i++){
let item = array[i];
if(item.toString().startsWith(keyword)){
results.push(item);
} else {
break; //as b and banana left
}
}
return results;
}
Take a look at binary search.看看二进制搜索。 How to implement binary search in JavaScript and hash table Hash table runtime complexity (insert, search and delete) 如何在 JavaScript和哈希表中实现二分查找哈希表运行时复杂度(插入、搜索和删除)
From my issue: every input field is slow due to many data.从我的问题来看:由于数据很多,每个输入字段都很慢。 so i add "changeDetection: ChangeDetectionStrategy.OnPush" at where data reloaded, then everything work normal.所以我在数据重新加载的地方添加了“changeDetection:ChangeDetectionStrategy.OnPush”,然后一切正常。
@Component({
selector: 'app-app-item',
templateUrl: './app-item.component.html',
styleUrls: ['./app-item.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.