0

我正在尝试使用 p 表制作单个过滤器。但是，某些列不适用于过滤（特别是与账单数据相关的那些）。我试图添加一个 ng-container 来做类似“let-client.bills”之类的事情，但也不起作用，我也没有更多的想法。

我的组件：

@Component({
  selector: 'app-bills',
  templateUrl: './bills.component.html',
  styleUrls: ['./bills.component.css']
})
export class BillsComponent implements OnInit {
  allClients!: Client[];
  cols!: any[];

  constructor(private billsService: BillsService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.cols = [
      { field: 'billCode', header: 'Código factura' },
      { field: 'clientName', header: 'Cliente' },
      { field: 'city', header: 'Ciudad' },
      { field: 'nit', header: 'NIT' },
      { field: 'total', header: 'Total' },
      { field: 'subtotal', header: 'Subtotal' },
      { field: 'iva', header: 'IVA' },
      { field: 'retention', header: 'Retención' },
      { field: 'creationDate', header: 'Fecha creación' },
      { field: 'status', header: 'Estado' },
      { field: 'isPaid', header: 'Pagada' },
      { field: 'paymentDate', header: 'Fecha pago' }
    ];
    this.getClients();
  }

  getClients = () => {
    this.billsService.getAllClients().subscribe((clients) => {
      this.allClients = clients;
    });
  }

我的 HTML：

<p-table #dt [columns]="cols" [value]="allClients">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
      <tr>
        <th *ngFor="let col of columns" [ngSwitch]="col.field">
          <input #put pInputText type="text" (input)="dt.filter(put.value, col.field, 'startsWith')">
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-client let-columns="columns">
      <tr *ngFor="let bill of client.bills">
          <td *ngFor="let col of columns">
            <ng-container *ngIf="client[col.field]">{{client[col.field]}}</ng-container>
            <ng-container *ngIf="(col.field == 'paymentDate' && bill.isPaid) || col.field != 'paymentDate'">{{bill[col.field]}}</ng-container>
          </td>
      </tr>
    </ng-template>
  </p-table>

接口客户端：

import { Bill } from "./bill";

export interface Client {
  id: string;
  clientName: string;
  city: string;
  nit: string;
  bills: Bill[];
}

接口比尔：

export interface Bill {
  billCode: string;
  total: number;
  subtotal: number;
  iva: number;
  retention: number;
  creationDate: Date;
  status: string;
  isPaid: boolean;
  paymentDate: Date;
}

欢迎提供帮助。我不知道该怎么做才能使与账单数据相关的过滤器起作用。然而，与 clientName、city 和 nit 相关的过滤器运行良好。

感谢所有阅读并帮助我的人。

4

0 回答 0