Javascript 如何在表上实现搜索功能？

这是我第一次使用Angular，我正在尝试在Angular应用程序中为我的表格实现搜索功能。我按照教程这样做，但有一些问题。
app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SearchPipe } from './search.pipe';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MsalModule, MsalAngularConfiguration, MsalInterceptor, MSAL_CONFIG_ANGULAR, MsalService, MSAL_CONFIG } from '@azure/msal-angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Configuration } from 'msal';

import { environment } from './../environments/environment';

//function MSALConfigFactory(): Configuration {
//  return {
//    auth: {
//      clientId: environment.clientId,
//      authority: `https://login.microsoftonline.com/${environment.teantId}`,
//    },
//  };
//}

//function MSALAngularConfigFactory(): MsalAngularConfiguration {
//  return {
//    consentScopes: [
//      'user.read',
//    ],
//    // Azure Functions does not work with AAD v2 Token, see
//    // https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization and
//    // https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/FAQs#q1-adal-vs-msal
//    protectedResourceMap: [[environment.apiUrl, [`${environment.clientId}/.default`]]],
//  };
//}

@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MsalModule
  ],
  providers: [],
  //  {
  //    provide: HTTP_INTERCEPTORS,
  //    useClass: MsalInterceptor,
  //    multi: true
  //  },
  //  {
  //    //provide: MSAL_CONFIG,
  //    //useFactory: MSALConfigFactory
  //  },
  //  {
  //    provide: MSAL_CONFIG_ANGULAR,
  //    useFactory: MSALAngularConfigFactory
  //  },
  //  MsalService
  //],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, Injectable, OnInit, Pipe, PipeTransform } from '@angular/core';
import { environment } from './../environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})

export class AppComponent implements OnInit {

  baseURL: string = "http://localhost...";

  public searchInput!: string;

  blobData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getBlobData();
  }

  public getBlobData() {
    return this.http.get<any[]>(this.baseURL).toPromise()
  }
}

<div class="container">
  <div id="header">
    <h1 id="title">title</h1>
    <div id="search-container">
      <input name="searchInput" [(ngModel)]="searchInput" id="searchbar" type="text" placeholder="Search.." class="form-control">
      <button id="search-button"><mat-icon id="search-icon">search</mat-icon></button>
    </div>
  </div>
  <!--<router-outlet></router-outlet>-->

    <div class="form-group">
      <table class="mat-elevation-z8" id="dataTable" mdbTable>
        <th id="name"> Name </th>
        <th id="createdOn"> Created On </th>
        <tr *ngFor="let data of blobData | search: searchInput">
          <td>{{ data.name }}</td>
          <td>{{ data.createdOn | date }}</td>
        </tr>
      </table>
    </div>

  <div id="footer-container">
    <footer id="footer">
      <img src="/assets/img/image.png" alt="image.png" id="logo" />
    </footer>
  </div>
</div>

应用程序组件。ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SearchPipe } from './search.pipe';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MsalModule, MsalAngularConfiguration, MsalInterceptor, MSAL_CONFIG_ANGULAR, MsalService, MSAL_CONFIG } from '@azure/msal-angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Configuration } from 'msal';

import { environment } from './../environments/environment';

//function MSALConfigFactory(): Configuration {
//  return {
//    auth: {
//      clientId: environment.clientId,
//      authority: `https://login.microsoftonline.com/${environment.teantId}`,
//    },
//  };
//}

//function MSALAngularConfigFactory(): MsalAngularConfiguration {
//  return {
//    consentScopes: [
//      'user.read',
//    ],
//    // Azure Functions does not work with AAD v2 Token, see
//    // https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization and
//    // https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/FAQs#q1-adal-vs-msal
//    protectedResourceMap: [[environment.apiUrl, [`${environment.clientId}/.default`]]],
//  };
//}

@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MsalModule
  ],
  providers: [],
  //  {
  //    provide: HTTP_INTERCEPTORS,
  //    useClass: MsalInterceptor,
  //    multi: true
  //  },
  //  {
  //    //provide: MSAL_CONFIG,
  //    //useFactory: MSALConfigFactory
  //  },
  //  {
  //    provide: MSAL_CONFIG_ANGULAR,
  //    useFactory: MSALAngularConfigFactory
  //  },
  //  MsalService
  //],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, Injectable, OnInit, Pipe, PipeTransform } from '@angular/core';
import { environment } from './../environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})

export class AppComponent implements OnInit {

  baseURL: string = "http://localhost...";

  public searchInput!: string;

  blobData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getBlobData();
  }

  public getBlobData() {
    return this.http.get<any[]>(this.baseURL).toPromise()
  }
}

<div class="container">
  <div id="header">
    <h1 id="title">title</h1>
    <div id="search-container">
      <input name="searchInput" [(ngModel)]="searchInput" id="searchbar" type="text" placeholder="Search.." class="form-control">
      <button id="search-button"><mat-icon id="search-icon">search</mat-icon></button>
    </div>
  </div>
  <!--<router-outlet></router-outlet>-->

    <div class="form-group">
      <table class="mat-elevation-z8" id="dataTable" mdbTable>
        <th id="name"> Name </th>
        <th id="createdOn"> Created On </th>
        <tr *ngFor="let data of blobData | search: searchInput">
          <td>{{ data.name }}</td>
          <td>{{ data.createdOn | date }}</td>
        </tr>
      </table>
    </div>

  <div id="footer-container">
    <footer id="footer">
      <img src="/assets/img/image.png" alt="image.png" id="logo" />
    </footer>
  </div>
</div>

问题是，每当我在localhost上打开页面时，表行就不再存在了
我注意到，每当我删除html文件中的

|search:searchInput

时，这些行就会再次出现，因此这与此有关。然而，我不知道如何解决这个问题

---

谢谢大家!

我不确定您是否需要更改管道：

return name.filter( x => {
 return x.toLowerCase().includes(searchInput)
    }
)

因为有时输入新行需要一个return语句。在任何情况下，检查过滤器本身是否工作都是有意义的

searchInput = searchInput.toLowerCase();
const test =  name.filter(
      x => x.toLowerCase().includes(searchInput)
    )
console.log(test)

---

解决方案：
我最终使用了，并且能够为表设置搜索功能

这是我的代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SearchPipe } from './search.pipe';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MsalModule, MsalAngularConfiguration, MsalInterceptor, MSAL_CONFIG_ANGULAR, MsalService, MSAL_CONFIG } from '@azure/msal-angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Configuration } from 'msal';

import { environment } from './../environments/environment';

//function MSALConfigFactory(): Configuration {
//  return {
//    auth: {
//      clientId: environment.clientId,
//      authority: `https://login.microsoftonline.com/${environment.teantId}`,
//    },
//  };
//}

//function MSALAngularConfigFactory(): MsalAngularConfiguration {
//  return {
//    consentScopes: [
//      'user.read',
//    ],
//    // Azure Functions does not work with AAD v2 Token, see
//    // https://docs.microsoft.com/en-us/azure/app-service/overview-authentication-authorization and
//    // https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/FAQs#q1-adal-vs-msal
//    protectedResourceMap: [[environment.apiUrl, [`${environment.clientId}/.default`]]],
//  };
//}

@NgModule({
  declarations: [
    AppComponent,
    SearchPipe
  ],
  imports: [
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MatIconModule,
    MatMenuModule,
    MatPaginatorModule,
    MatTableModule,
    MatProgressSpinnerModule,
    MsalModule
  ],
  providers: [],
  //  {
  //    provide: HTTP_INTERCEPTORS,
  //    useClass: MsalInterceptor,
  //    multi: true
  //  },
  //  {
  //    //provide: MSAL_CONFIG,
  //    //useFactory: MSALConfigFactory
  //  },
  //  {
  //    provide: MSAL_CONFIG_ANGULAR,
  //    useFactory: MSALAngularConfigFactory
  //  },
  //  MsalService
  //],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, Injectable, OnInit, Pipe, PipeTransform } from '@angular/core';
import { environment } from './../environments/environment';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})

export class AppComponent implements OnInit {

  baseURL: string = "http://localhost...";

  public searchInput!: string;

  blobData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getBlobData();
  }

  public getBlobData() {
    return this.http.get<any[]>(this.baseURL).toPromise()
  }
}

<div class="container">
  <div id="header">
    <h1 id="title">title</h1>
    <div id="search-container">
      <input name="searchInput" [(ngModel)]="searchInput" id="searchbar" type="text" placeholder="Search.." class="form-control">
      <button id="search-button"><mat-icon id="search-icon">search</mat-icon></button>
    </div>
  </div>
  <!--<router-outlet></router-outlet>-->

    <div class="form-group">
      <table class="mat-elevation-z8" id="dataTable" mdbTable>
        <th id="name"> Name </th>
        <th id="createdOn"> Created On </th>
        <tr *ngFor="let data of blobData | search: searchInput">
          <td>{{ data.name }}</td>
          <td>{{ data.createdOn | date }}</td>
        </tr>
      </table>
    </div>

  <div id="footer-container">
    <footer id="footer">
      <img src="/assets/img/image.png" alt="image.png" id="logo" />
    </footer>
  </div>
</div>

app.component.ts

api.service.ts

.includes（）

在IE上不起作用。const test=name.filter（x=>x.toLocaleLowerCase（）。indexOf（searchInput）！=-1）将起作用