在嵌套元素中应用 searchPipe

Question

我有以下管道在某些情况下无法正常工作，如下所示 Stackblitz 我已经添加了我的整个代码示例，请帮我找出解决方案。

提前致谢。

Answer 1

在您的 AppComponent 中，query 以 undefined 开始，因此管道接收 filterText 参数作为 undefined。结果这一行引发了一个异常：

filterText = filterText.toLowerCase();

您需要在管道实现中处理这种情况，例如添加：

if (!filterText ) {
    return value;
}

Answer 2

您需要为查询分配空白字符串，因为它最初是未定义的。

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  query = '';   // Assign blank string here.
  students: any;

  constructor(private studentService: StudentsService) {
    this.students = this.studentService.students;
  }
}

在嵌套元素中应用 searchPipe

applying searchPipe in nested element

search

pipe

angular