如何在Angular2中实现“类别过滤器”？

// 组件类
import { Component } from '@angular/core';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {
  categories = ['Category 1', 'Category 2', 'Category 3']; // 类别列表
  selectedCategory: string; // 类别过滤器变量
  data = [
    { name: 'Item 1', category: 'Category 1' },
    { name: 'Item 2', category: 'Category 2' },
    { name: 'Item 3', category: 'Category 1' },
    { name: 'Item 4', category: 'Category 3' }
  ]; // 数据列表

  filterData() {
    if (this.selectedCategory) {
      return this.data.filter(item => item.category === this.selectedCategory);
    } else {
      return this.data;
    }
  }
}

<!-- 组件模板 -->
<div>
  <label for="category">选择类别:</label>
  <select id="category" [(ngModel)]="selectedCategory">
    <option value="">全部</option>
    <option *ngFor="let category of categories" [value]="category">{{ category }}</option>
  </select>
</div>

<ul>
  <li *ngFor="let item of filterData()">{{ item.name }}</li>
</ul>