无法在 PrimgNg table (Angular, primeNg) 中过滤

Question

我实际上是在尝试通过实例进行过滤，我编写了以下代码：在我的 component.ts 我有这个：

import { Component, OnInit } from "@angular/core";
import { AlertingService } from "src/app/services/alerting.service";
import { AlertingDB } from "src/app/models/alerting-db";
import { DatePipe } from "@angular/common";
import { MessageService } from "primeng/api";

@Component({
  selector: "app-alerts-history",
  templateUrl: "./alerts-history.component.html",
  styleUrls: ["./alerts-history.component.css"]
})
export class AlertsHistoryComponent implements OnInit {
  AlertsHistory: AlertingDB;
  cols: string[];

  constructor(
    private alertingService: AlertingService,
    public datepipe: DatePipe,
    private messageService: MessageService
  ) {
    this.cols = [
      "Name",
      "Instance",
      "Severity",
      "Summary",
      "State",
      "Active Date"
    ];
  }

  ngOnInit() {
    this.alertingService.getAllAlertsFromDB().subscribe(res => {
      this.AlertsHistory = res;
    });
  }

  deleteHistory() {
    this.alertingService.deleteAllAlertsFromDB().subscribe(async result => {
      this.messageService.add({
        severity: "info",
        summary: "Success",
        detail: `History Cleared`,
        sticky: true
      });
      this.AlertsHistory = await this.alertingService
        .getAllAlertsFromDB()
        .toPromise();
    });
  }
}

在我的 component.HTML 文件中我有这个：

<button
  pButton
  type="button"
  label="Clear History"
  class="ui-button-danger"
  style="margin-bottom: 15px;margin-top: 15px;"
  (click)="deleteHistory()"
></button>
<div>
  <p-table
    autoLayout="true"
    ng-style="overflow: auto;"
    #dt
    [columns]="cols"
    [value]="AlertsHistory"
    [paginator]="true"
    [rows]="15"
  >
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns" [pSortableColumn]="col">
          {{ col }}
          <p-sortIcon
            [field]="col"
            ariaLabel="Activate to sort"
            ariaLabelDesc="Activate to sort in descending order"
            ariaLabelAsc="Activate to sort in ascending order"
          >
          </p-sortIcon>
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col">
          <input
            *ngSwitchCase="'Instance'"
            pInputText
            type="text"
            (input)="dt.filter($event.target.value, col, col.filterMatchMode)"
          />
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-alert>
      <tr [pSelectableRow]="alert">
        <td>{{ alert.name }}</td>
        <td>{{ alert.instance }}</td>
        <td>{{ alert.severity }}</td>
        <td>{{ alert.summary }}</td>
        <td>{{ alert.state }}</td>
        <td>{{ alert.activeAt | date: "medium" }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

我的component.model.ts:

export class AlertingDB {
  id: number;
  name: string;
  instance: string;
  severity: string;
  summary: string;
  state: string;
  activeAt: string;
}

在我的 component.service.ts 中：

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Response } from "@angular/http";
import { environment } from "src/environments/environment";
import { Alerting } from "../models/alerting";
import { AlertingDB } from "../models/alerting-db";

@Injectable({
  providedIn: "root"
})
export class AlertingService {
  private AlertingUrl = environment.API_URL + "Alerting"; // URL to web api

  constructor(private http: HttpClient) {}

  getAllAlertsFromDB(): Observable<AlertingDB> {
    return this.http.get(this.AlertingUrl + "/getAll").pipe(
      map((response: AlertingDB) => {
        return <AlertingDB>response;
      })
    );
  }
  deleteAllAlertsFromDB(): Observable<AlertingDB> {
    return this.http.delete<AlertingDB>(this.AlertingUrl);
  }
}

所有功能都运行良好，如果你愿意，你可以使用我的代码，现在的问题是当我使用过滤器时它不过滤任何东西。例子：我在这里获取所有实例：

但是当我尝试过滤时，它给了我 0 个项目：

在控制台中没有错误，我希望能够使用那个过滤器。任何帮助将不胜感激谢谢！ :)

Answer 1

您正在尝试根据 col.filterMatchMode

过滤您的列

在您的组件中，cols 是一个字符串数组，因此当我们到达模板时 col.filterMatchMode 将始终是 undefined。

您可以在模板中明确定义过滤模式：

<input
  *ngSwitchCase="'Instance'"
   pInputText
   type="text"
   (input)="dt.filter($event.target.value, col, 'in')"
 />

或者重构你的 cols 使其包含一个 filterMatchMode 属性和一个 name:

this.cols = [
  {name: "Name"},
  {name: "Instance", filterMatchMode: 'in'},
  {name: "Severity"},
  {name: "Summary"},
  {name: "State"},
  {name: "Active Date"}
];

并在您的模板中：

<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns" [pSortableColumn]="col.name">
      {{ col.name }}
      <p-sortIcon
        [field]="col.name"
        ariaLabel="Activate to sort"
        ariaLabelDesc="Activate to sort in descending order"
        ariaLabelAsc="Activate to sort in ascending order"
      >
      </p-sortIcon>
    </th>
  </tr>
  <tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.name">
      <input
        *ngSwitchCase="'Instance'"
        pInputText
        type="text"
        (input)="dt.filter($event.target.value, col.name, col.filterMatchMode)"
      />
    </th>
  </tr>

无法在 PrimgNg table (Angular, primeNg) 中过滤

Can't filter in PrimgNg table (Angular, primeNg)

typescript

primeng

angular