Question

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

我使用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 ); 
   }
}

它将返回具有匹配数组项的数组。

希望它会有所帮助：）

根据键过滤数组

1 个答案: