Angular ngBootstrap：使用下拉列表过滤 table 中的值

Question

需要帮助根据过滤器 selected

过滤 table 值

这是我想用作过滤器的 ngbDropdown。

如果我select公司A，table只会显示公司A。

不太确定如何 link 它。我得到了显示所有可用公司的过滤器，但无法在 table 上应用过滤器。

更新 HTML table 的代码

<select [(ngModel)]="company">
    <option [ngValue]="undefined">Please Select</option>
    <!-- List of all the companies -->
    <option *ngFor="let department of departments">{{department.company.companyName}}</option>
  </select>
  <div *ngFor="let department of departments | companyFilter: company">
    {{department.departmentName}} {{department.company.companyName}}
  </div>

department.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SessionService } from '../session.service';
import { DepartmentService } from '../department.service';
import { Department } from '../department';
import { Pipe, PipeTransform } from '@angular/core';
import { CompanyFilterPipe } from './company-filter.pipe';


@Component({
  selector: 'app-department',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
})


export class DepartmentComponent implements OnInit {


  departments: Department[];

    constructor(private router: Router,
        private activatedRoute: ActivatedRoute,
        public sessionService: SessionService,
        private departmentService: DepartmentService) { 

    }

  ngOnInit() {

    this.departmentService.getDepartments().subscribe(
            response => {
        this.departments = response.departments;
        console.log(response.departments);
        console.log(response);
            },
            error => {
                alert("You have encountered an error : " + error);
            }
        );

  }

}

console.log 为 response.departments 打印的内容

Object
departments: Array(4)
0:
company: {companyAddress: "Brisbane 21", companyCode: "199305085M", companyId: 1, companyName: "Company A", companyNumber: 9999999, …}
departmentId: 1
departmentName: "Brand Management"

我更新了appmodule.ts但是好像找不到companyFilter

Answer 1

向您的模块添加管道

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

@Pipe({
  name: 'companyFilter'
})
export class CompanyFilterPipe implements PipeTransform {
  transform(departments, company) {
    return company ? departments.filter(department => department.company === company) : departments;
  }
}

然后在您的模板中

<tr *ngFor="let department of departments | companyFilter: company">

如果公司属性是假的，它将 return 所有部门，一旦公司有值，它将按公司过滤部门。

有关示例，请参阅 StackBlitz https://stackblitz.com/edit/angular-3x9lfm

Angular ngBootstrap：使用下拉列表过滤 table 中的值

Angular ngBootstrap: Filter values in table using dropdown list

ngx-bootstrap

angular