Asp.net 如何在angular 7 cli项目中创建实时搜索框

我想在angular 7 cli项目中创建搜索框。我的项目后端是asp.net核心web api。我将显示数组的数据集，我想使搜索框在角度前端应用程序。怎么做

角度7 cli

下面的数据数组来自asp.net web api 当我在搜索输入框中输入字母或数字时，只有输入的文本相关数据才会显示在前端。

使用ANGULAR提供的

Html代码

<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"
    autocomplete="off">
    <div   *ngFor="let item of data| filterForUser : searchText; let i = index" >
<div> {{item.productId}}-{{item.productName}}</div>
</div>

要使用所有字段进行筛选，请使用以下筛选组件

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        if (!items || !searchText) return items;
        searchText = searchText.toLowerCase();
 return items.filter(it => {
            return it.productId==searchText;
        });      
    }

}

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        if (!items || !searchText) return items;
        searchText = searchText.toLowerCase();
            return items.filter((data) => this.matchValue(data,searchText)); 
    }
    matchValue(data, value) {
        return Object.keys(data).map((key) => {
           return new RegExp(value, 'gi').test(data[key]);
        }).some(result => result);
      }
}

当用户仅在搜索框中键入任何内容时，显示结果

    if (!items || !searchText) return [];

注意：请使用ANGULAR提供的

FilterPipeForUserSearch

在应用程序/任何其他模块中声明

FilterPipeForUserSearch

Html代码

<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"
    autocomplete="off">
    <div   *ngFor="let item of data| filterForUser : searchText; let i = index" >
<div> {{item.productId}}-{{item.productName}}</div>
</div>

要使用所有字段进行筛选，请使用以下筛选组件

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        if (!items || !searchText) return items;
        searchText = searchText.toLowerCase();
 return items.filter(it => {
            return it.productId==searchText;
        });      
    }

}

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
    transform(items: any[], searchText: string): any[] {
        if (!items || !searchText) return items;
        searchText = searchText.toLowerCase();
            return items.filter((data) => this.matchValue(data,searchText)); 
    }
    matchValue(data, value) {
        return Object.keys(data).map((key) => {
           return new RegExp(value, 'gi').test(data[key]);
        }).some(result => result);
      }
}

当用户仅在搜索框中键入任何内容时，显示结果

    if (!items || !searchText) return [];

注意：请在应用程序/任何其他模块中声明
FilterPipeForUserSearch
让我们尝试解释一下。
因此，您拥有的是您在上面显示的存储数据

您希望重复筛选该数据

所以首先，当你收集数据时，你要复制一份

差不多

this.historyData=数据

然后，当您搜索时，您会：

this.data=this.historyData

现在该部分已完成，现在您要进行筛选，请执行以下操作：

let searchedData = [];
for(let i = 0; i < this.data.length; i++) {
  let boolean = false;
  Object.getOwnPropertyNames(this.data[i]).map((key: string) = {
    if(this.data[i][key] === value) { boolean = true; }
  })
  if(boolean) { searchedData.push(this.data[i]); }
}
this.data = searchedData;

让我们试着解释一下。
因此，您拥有的是您在上面显示的存储数据

您希望重复筛选该数据

所以首先，当你收集数据时，你要复制一份

差不多

this.historyData=数据

然后，当您搜索时，您会：

this.data=this.historyData

现在该部分已完成，现在您要进行筛选，请执行以下操作：

let searchedData = [];
for(let i = 0; i < this.data.length; i++) {
  let boolean = false;
  Object.getOwnPropertyNames(this.data[i]).map((key: string) = {
    if(this.data[i][key] === value) { boolean = true; }
  })
  if(boolean) { searchedData.push(this.data[i]); }
}
this.data = searchedData;

希望我不会太晚，但我有一个替代方法，除了使用管道。基本上，这种方法需要您获取对象的键/属性，然后我们遍历数组以搜索每个属性中的术语


const数据=[{
“productId”：1，
“产品名称”：“产品1”，
“产品价格”：500，
“产品说明”：“一个产品包括一个产品，一个产品包括一个产品、一个产品、一个产品和一个产品。”，
“产品类别”：“第1类”，
“产品可用性”：0
},
{
“productId”：2，
“产品名称”：“产品2”，
“产品价格”：1000，
“产品说明”：“2个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第2类”，
“产品可用性”：0
},
{
“productId”：3，
“产品名称”：“产品3”，
“产品价格”：2000年，
“产品说明”：“3个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第2类”，
“产品可用性”：0
},
{
“productId”：4，
“产品名称”：“产品4”，
“产品价格”：3000，
“产品说明”：“4个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第1类”，
“产品可用性”：0
}
];
函数搜索（searchTerm）{
const val=searchTerm.toLowerCase（）；
常量键=Object.keys（数据[0]）；
//console.log（键）
const searchResults=data.filter（项=>{
//按属性遍历每行的数据
for（设i=0；i搜索（“Des 2 enim ipsam”）希望我不会太晚，但除了使用管道之外，我还有一种替代方法。基本上，这种方法需要您获取对象的键/属性，然后我们遍历数组以搜索每个属性中的术语


const数据=[{
“productId”：1，
“产品名称”：“产品1”，
“产品价格”：500，
“产品说明”：“一个产品包括一个产品，一个产品包括一个产品、一个产品、一个产品和一个产品。”，
“产品类别”：“第1类”，
“产品可用性”：0
},
{
“productId”：2，
“产品名称”：“产品2”，
“产品价格”：1000，
“产品说明”：“2个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第2类”，
“产品可用性”：0
},
{
“productId”：3，
“产品名称”：“产品3”，
“产品价格”：2000年，
“产品说明”：“3个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第2类”，
“产品可用性”：0
},
{
“productId”：4，
“产品名称”：“产品4”，
“产品价格”：3000，
“产品说明”：“4个产品的质量和质量都是由客户提供的。”，
“产品类别”：“第1类”，
“产品可用性”：0
}
];
函数搜索（searchTerm）{
const val=searchTerm.toLowerCase（）；
常量键=Object.keys（数据[0]）；
//console.log（键）
const searchResults=data.filter（项=>{
//按属性遍历每行的数据
for（设i=0；i搜索（“Des 2 enim ipsam”）嘿，谢谢你抽出时间。我想知道多重检查函数是如何实现的，（it.productId==searchText），所以我想检查以及productDescription，ProductName。如果你想检查多重字段，那么，这就是工作了，Tha