angular - 如何使用 API 中的数据实现 ng-bootstrap 表排序、搜索过滤和分页

Question

我正在实现一个事务表，其中填充了我自己创建的 API 中的数据，我想让它可排序、可过滤和分页。我正在尝试使用 ng-bootstrap 来完成它，我看到了文档，但我只是无法让它工作，在完整的示例中他们使用静态数据数组。

我试图调整我在文档页面中看到的内容： https ://ng-bootstrap.github.io/#/components/table/examples#sortable 但我无法让它工作。

// TS

    import { Component, OnInit } from '@angular/core';
    import { NgxSpinnerService } from 'ngx-spinner';

    import { TransactionsService } from '../transactions.service';
    import { Transactions, Career, Faculty, RoleType } from 'src/assets/models';
    import { RegisterService } from '../register.service';
    import { AlertService } from '../alert.service';

    @Component({
      selector: 'app-admin',
      templateUrl: './admin.component.html',
      styleUrls: ['./admin.component.scss']
    })
    export class AdminComponent implements OnInit {

      content: Transactions;

      analytic = false;
      uniFaculties: Faculty;
      uniCareers: Career;
      uniUsers: RoleType;

      constructor(
        private modalService: NgbModal,
        private spinner: NgxSpinnerService,
        private alertService: AlertService,
        private transactionService: TransactionsService
      ) { }

      ngOnInit() {
        this.spinner.show();
        this.transactionService.getAllTransactions()
          .subscribe(res => {
            this.content = res;
            console.log(this.content); // testing all transaction object

          });
        this.spinner.hide();
      }
    }

// HTML

    <div class="fluid-container admin-transactions" *ngIf="content">
      <h1><span class="badge badge-info header-transactions"><i class="fas fa-exchange-alt"></i> Transacciones</span></h1>
      <table class="table table-hover fixed_header">
        <thead class="thead table-info">
          <tr class="row table-info">
            <th class="col-1 d-flex justify-content-center" scope="col">ID de Transacción</th>
            <th class="col-1 d-flex justify-content-center" scope="col">ID de Usuario</th>
            <th class="col-1 d-flex justify-content-center" scope="col">Tipo</th>
            <th class="col-4 d-flex justify-content-center" scope="col">Fecha</th>
            <th class="col-3 d-flex justify-content-center" scope="col">Descripción</th>
            <th class="col-2 d-flex justify-content-center" scope="col">Monto</th>
          </tr>
        </thead>
        <tbody>
          <tr class="row" *ngFor='let row of content.transactions'>
            <td class="col-1 d-flex justify-content-center id">{{ row.trx_ID }}</td>
            <td class="col-1 d-flex justify-content-center id">{{ row.user_ID }}</td>
            <td class="col-1 d-flex justify-content-center trx" [ngClass]="{'custom-class': row.trx_type === 'RCH' && row.amount !== 0, 'default-color': row.trx_type !== 'RCH'}">{{ row.trx_type}}</td>
            <td class="col-4 d-flex justify-content-center date">{{ row.date | date:'long' }} </td>
            <td class="col-3 d-flex justify-content-center description">{{ row.description }}</td>
            <td class="col-2 d-flex justify-content-center amount" [ngClass]="{'rch-class': row.trx_type === 'RCH' && row.amount !== 0 , 'pay-class': row.trx_type !== 'RCH'}">{{ row.amount | currency }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr>

标签： angularng-bootstrapbootstrap-table