根据键过滤数组

Question

我正在尝试使用 Angular 7 进行动态研究。我正在使用多个键从我的 API 中获取一个数组：[ _id => 123, pseudo => "Germain", email => .. ]。 我需要用一个字符串过滤所有结果，但只在我的伪字段上过滤，然后返回所有只有匹配值的数组。

我使用 ngFor 显示我的所有结果，并且我已经使用我找到的教程创建了一个过滤器管道..

这是我的研究部分：

<div *ngFor="let profil of profils | filter : searchText" class="col-md-4">
                <figure class="card card-product">
                    <img class="rounded-circle w-50 mx-auto" src="https://i.ibb.co/PQfsPbH/profil.jpg">
                    <figcaption class="info-wrap">
                        <h4 class="title">{{ profil.pseudo }}</h4>
                        <p class="desc">{{ profil.desc }}</p>
                        <div class="rating-wrap">
                            <div class="label-rating">132 reviews</div>
                        </div>
                    </figcaption>
                    <div class="bottom-wrap">
                        <a [routerLink]="['personnalite', profil._id]" class="btn btn-sm btn-primary float-right">Voir le profil</a>
                    </div>
                </figure>
            </div>

这是我的过滤管道功能：

export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items; 
    searchText = searchText.toLowerCase();
    return items.filter( it => {
      return it.toLowerCase().includes(searchText);
    });
   }
}

但这只会过滤像这样的数组：[“pseudo1”，“pseudo2”..] 而不是索引的... 知道如何管理吗？

Answer 1

export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items; 
    searchText = searchText.toLowerCase();
    //updated
    return items.filter( item => item.pseudo.toLowerCase().indexOf(searchText) > -1 ); 
   }
}

它将返回一个包含匹配数组项的数组。

希望对你有帮助:)