来自输入的角度搜索数组值

Posted 2021-04-04

我需要搜索我需要从输入中获取搜索值并在数组中搜索的名称。我需要输入名称并在数组中搜索它并仅显示该名称数据。还附加数据控制台。在数组中有member_name我需要输入并仅显示该member_name数据。

这是我如何输入

   <div class="col-md-3">
       <div class="form-group" >
         <label for="">Search Name</label>
               <input type="search"
               class="form-control" placeholder="Search Name">
       </div>
   </div>

数据如何显示在.html中

                  <table class="table table-responsive-md text-center">
                      <thead>
                          <tr>
                              <th>STATUS</th>
                              <th>Name</th>
                              <th>Patient Name</th>
                              <th>Claimed Ammount</th>
                              <th>Company</th>
                              <th>Submitted By</th>
                              <!-- <th>Website URL</th> -->

                          </tr>
                      </thead>
                      <tbody *ngIf="data">
                            <tr *ngFor="let x of data | filterBy: userFilter">
                                <td>

                                    <span class="text-success" *ngIf="x.status == 'submitted'">Submitted</span>
                                    <span class="text-primary" *ngIf="x.status == 'settled'">Settled</span>
                                    <span class="text-warning" *ngIf="x.status == 'rejected'">Rejected</span>
                                    <span class="text-danger" *ngIf="x.status == 'Approved'">Approved</span>
                                    <span class="text-danger" *ngIf="x.status == 'ojection claim'">Objection claim</span>


                                </td>
                              <td>
                                <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="">
                                {{x.member_name}}
                              </td>
                              <td>{{x.patient_name}}</td>
                              <td>{{x.claimed_value}}</td>
                              <td>                                      



                                  <span  class="text-success" *ngIf="x.company_id == '999'" >Airlink Communication</span>
                                  <span class="text-success" *ngIf="x.company_id == '637'">Ascertia (Pvt) Ltd</span>
                                  <span *ngIf="x.company_id == '1053'" class="text-success">Frontier Works Organization</span>
                                 <span *ngIf="x.company_id == '1174'" class="text-success">Ebryx (pvt) Ltd</span>
                                  <span  *ngIf="x.company_id == '274'" class="text-success">HY Enterprises (Pvt) Limited</span>
                                 <span *ngIf="x.company_id == '459'" class="text-success">Naimat Saleem trust NST (US GROUP)</span>
                                 <span *ngIf="x.company_id == '659'" class="text-success">Samad Rubber Works (Pvt) Ltd</span>
                                <span *ngIf="x.company_id == '56'" class="text-success">Sundry Clients</span>
                                <span *ngIf="x.company_id == '620'" class="text-success">TIMEXPERTS (PRIVATE) Limited</span>
                                <span *ngIf="x.company_id == '39'" class="text-success">US Apparel & Textile (Pvt) Limited</span>
                                <span *ngIf="x.company_id == '40'" class="text-success">US Denim Mills (Pvt) Limited</span>


                               </td>
                              <td>{{x.submitted_at || 'not-defined'}}

                              </td>
                          </tr>
                      </tbody>
                  </table>

答案

通过使用Angular's Pipe：

HTML代码：

<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"
        autocomplete="off">
    <table class="table table-responsive-md text-center">
        <thead>
            <tr>
                <th>STATUS</th>
                <th>Name</th>
                <th>Patient Name</th>
                <th>Claimed Ammount</th>
                <th>Company</th>
                <th>Submitted By</th>
                <!-- <th>Website URL</th> -->
            </tr>
        </thead>
        <tbody *ngIf="data">
            <tr *ngFor="let x of data  filterForUser : searchText;>
                <td>
                    <span class="text-success" *ngIf="x.status == 'submitted'">Submitted</span>
                    <span class="text-primary" *ngIf="x.status == 'settled'">Settled</span>
                    <span class="text-warning" *ngIf="x.status == 'rejected'">Rejected</span>
                    <span class="text-danger" *ngIf="x.status == 'Approved'">Approved</span>
                    <span class="text-danger" *ngIf="x.status == 'ojection claim'">Objection claim</span>
                </td>
                <td>
                    <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="">
                                {{x.member_name}}

                    </td>
                    <td>{{x.patient_name}}</td>
                    <td>{{x.claimed_value}}</td>
                    <td>
                        <span  class="text-success" *ngIf="x.company_id == '999'" >Airlink Communication</span>
                        <span class="text-success" *ngIf="x.company_id == '637'">Ascertia (Pvt) Ltd</span>
                        <span *ngIf="x.company_id == '1053'" class="text-success">Frontier Works Organization</span>
                        <span *ngIf="x.company_id == '1174'" class="text-success">Ebryx (pvt) Ltd</span>
                        <span  *ngIf="x.company_id == '274'" class="text-success">HY Enterprises (Pvt) Limited</span>
                        <span *ngIf="x.company_id == '459'" class="text-success">Naimat Saleem trust NST (US GROUP)</span>
                        <span *ngIf="x.company_id == '659'" class="text-success">Samad Rubber Works (Pvt) Ltd</span>
                        <span *ngIf="x.company_id == '56'" class="text-success">Sundry Clients</span>
                        <span *ngIf="x.company_id == '620'" class="text-success">TIMEXPERTS (PRIVATE) Limited</span>
                        <span *ngIf="x.company_id == '39'" class="text-success">US Apparel & Textile (Pvt) Limited</span>
                        <span *ngIf="x.company_id == '40'" class="text-success">US Denim Mills (Pvt) Limited</span>
                    </td>
                    <td>{{x.submitted_at || 'not-defined'}}

                              </td>
                </tr>
            </tbody>
        </table>

过滤组件

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'userFilter'
})
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 [];

注意：请在app /任何其他模块中声明FilterPipeForUserSearch

另一答案

我用非常短的方法完成了它解决了我的问题。

 <input type="text" class="form-control" [(ngModel)]="userFilter.member_name" 
  placeholder="Search name" name="search">

      <tbody *ngIf="data">
           <tr *ngFor="let x of data | filterBy: userFilter">
               <td>{{x.member_name</td>
           </tr>
      </tbody>

 userFilter: any = { member_name:'', status:'', company_id: ''};