自定義管道 管道（過濾器）為過濾數據顯示下列list數據

• pip.ts 文件

import { Pipe, PipeTransform } from '@angular/core';
import { TableType } from './add-student.service';

@Pipe({
 name: 'studyProjectType'
})
export class StudyProjectTypePipe implements PipeTransform {
 transform( allstudyProjects: any[], typeParams: any): any {
   // console.log(typeParams);
   return allstudyProjects.filter(type => typeParams.indexOf(type.type) !== -1);
 }
}
 

transform 方法是管道的基本要素。 PipeTransform接口中定義了它. 當每個輸入值被傳給 transform 方法時，還會帶上另一個參數
allstudyProjects 是輸入值 ，也就是html 頁面中 | 前面的studyProjectList是管道名 typeParams是管道名後的參數 傳進管道中
以上這兩個為形參，名字自定義，建議命名規範，尤其是寫分享管道 . transform 函數裏return 是輸入數據過濾filter，裏面是一個函數

這裏的思路是 對比 請求下的數據 studyProjectList 每個列表的type屬性 對比下面typeParams, 結果為true 就通過過濾顯示

本地數據來源

public types: TabType[] = [
    {
      name: '課程',
      id: 'courseDate',
      tags: ['在線課', '線上課', '直播課', '線下課'],
    },
    {
      name: '考試',
      id: 'examDate',
      tags: ['試卷'],
    },
    {
      name: '作業',
      id: 'taskDate',
      tags: ['作業'],
    },
    {
      name: '問卷',
      id: 'questionnaireDate',
      tags: ['問卷'],
    },
  ];
  private typeParams: string[] = this.types[0].tags;    //初始值
 

• html 文件

  <div class="table-responsive">
    <!-- {{ studyProjectList | studyProjectType }} -->
    <app-project-assign-list  [studyProjectList] = "studyProjectList | studyProjectType: typeParams "></app-project-assign-list>
  </div>

app-project-assign-list 為列表樣式組件

  //click 點擊事件 改變types[i]
  switchType (i) {
    this.typeParams = this.types[i].tags;
  }

線上數據來源

 /*
 * 數據來源 
 * addStudentService 服務提供 getStudyProject方法
  */
 dataSource: Observable<any>;
  // studyProjectList: Array<any> = [];
   studyProjectList: TableType[] = [];
  constructor(
    private addStudentService: AddStudentService,
  ) {
  }

  ngOnInit() {
    this.dataSource = this.addStudentService.getStudyProject();
    this.dataSource.subscribe(
      (data) => {
        console.log(data);
        this.studyProjectList = data.students;
      }
    );
  }

ngular6開發不完全筆記（二）-- 管道