在angular 7中实现动态html bootstrap表的排序和过滤的最佳方式是什么？

在Angular 7中实现动态HTML Bootstrap表的排序和过滤的最佳方式是使用Angular的内置功能和第三方库ngx-bootstrap。

首先，确保已经安装了ngx-bootstrap库。可以通过以下命令进行安装：

npm install ngx-bootstrap --save

接下来，按照以下步骤实现动态HTML Bootstrap表的排序和过滤：

导入所需的模块和服务：

import { Component } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { SortableModule } from 'ngx-bootstrap/sortable';

在组件类中定义表格数据和排序/过滤相关的变量：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  tableData: any[] = [
    { name: 'John', age: 25, city: 'New York' },
    { name: 'Jane', age: 30, city: 'London' },
    { name: 'Bob', age: 35, city: 'Paris' }
  ];

  sortKey: string = '';
  sortReverse: boolean = false;
  filterText: string = '';
}

在HTML模板中使用ngx-bootstrap的组件和指令来实现排序和过滤：

<table class="table">
  <thead>
    <tr>
      <th (click)="sort('name')">Name</th>
      <th (click)="sort('age')">Age</th>
      <th (click)="sort('city')">City</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of tableData | filter: filterText | orderBy: sortKey: sortReverse">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.city }}</td>
    </tr>
  </tbody>
</table>

<input type="text" [(ngModel)]="filterText" placeholder="Filter">

在组件类中实现排序和过滤的方法：

sort(key: string) {
  this.sortKey = key;
  this.sortReverse = !this.sortReverse;
}

创建自定义管道来实现过滤和排序功能：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;

    searchText = searchText.toLowerCase();

    return items.filter(item => {
      return Object.keys(item).some(key => {
        return item[key].toString().toLowerCase().includes(searchText);
      });
    });
  }
}

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
  transform(items: any[], key: string, reverse: boolean): any[] {
    if (!items) return [];
    if (!key) return items;

    return items.sort((a, b) => {
      let x = a[key];
      let y = b[key];

      if (typeof x === 'string') {
        x = x.toLowerCase();
      }
      if (typeof y === 'string') {
        y = y.toLowerCase();
      }

      if (x < y) {
        return reverse ? 1 : -1;
      }
      if (x > y) {
        return reverse ? -1 : 1;
      }
      return 0;
    });
  }
}

在模块中声明和导入自定义管道：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TableComponent } from './table.component';
import { FilterPipe, OrderByPipe } from './custom-pipes';

@NgModule({
  declarations: [
    AppComponent,
    TableComponent,
    FilterPipe,
    OrderByPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BsDropdownModule.forRoot(),
    SortableModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样，你就可以在Angular 7中实现动态HTML Bootstrap表的排序和过滤了。请注意，以上示例中的代码仅供参考，你可以根据自己的需求进行修改和扩展。如果你想了解更多关于ngx-bootstrap的信息，可以访问腾讯云的ngx-bootstrap产品介绍页面：ngx-bootstrap产品介绍。