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

Question

我需要搜索我需要从输入中获取搜索值并在数组中搜索的名称。我需要输入名称并在数组中搜索并仅显示该名称数据。还要附上数据控制台。在数组中有 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 Amount</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

Answer 1

通过使用Angular 的 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 Amount</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 [];

注意：请FilterPipeForUserSearch在应用程序/任何其他模块中声明