无法在 Angular 材料表中设置未定义错误的属性“filterPredicate”答案

【问题标题】：Cannot set property 'filterPredicate' of undefined error in Angular Material Table无法在 Angular 材料表中设置未定义错误的属性“filterPredicate”
【发布时间】：2018-12-13 04:02:55
【问题描述】：

我有一个带有客户端过滤的 Angular 材料表，我在其中从服务中检索数据。虽然我的过滤器可以正常处理硬编码数据，但我收到一条错误消息：自从我切换到从服务中检索数据以来，无法设置未定义的属性“filterPredicate”。数据在我的表格中正确可见，但我无法过滤它。

export class MessageTableComponent implements OnInit {
    datasource: any;
}
    ngOnInit() {

        this.messageService.getMessageTableData().subscribe(
          response => {
            this.dataSource = new MatTableDataSource(response);
            console.log(response);
          }
        );

        this.RequestIdFilter.valueChanges.subscribe((RequestIdFilterValue) => {
          this.filteredValues['RequestID'] = RequestIdFilterValue;
          this.dataSource.filter = JSON.stringify(this.filteredValues);
          });

          this.RequestStatusFilter.valueChanges.subscribe((RequestStatusFilterValue) => {
            this.filteredValues['RequestStatus'] = RequestStatusFilterValue;
            this.dataSource.filter = JSON.stringify(this.filteredValues);
            });

          this.RequestorNameFilter.valueChanges.subscribe((RequestorNameFilterValue) => {
            this.filteredValues['RequestorName'] = RequestorNameFilterValue;
            this.dataSource.filter = JSON.stringify(this.filteredValues);
          });

          this.ApproverNameFilter.valueChanges.subscribe((ApproverNameFilterValue) => {
            this.filteredValues['ApproverName'] = ApproverNameFilterValue;
            this.dataSource.filter = JSON.stringify(this.filteredValues);
          });

          this.SubjectFilter.valueChanges.subscribe((SubjectFilterValue) => {
            this.filteredValues['Subject'] = SubjectFilterValue;
            this.dataSource.filter = JSON.stringify(this.filteredValues);
          });

          this.MessageStatusFilter.valueChanges.subscribe((MessageStatusFilterValue) => {
            this.filteredValues['MessageStatus'] = MessageStatusFilterValue;
            this.dataSource.filter = JSON.stringify(this.filteredValues);
            });

            this.SubmissionFromDateFilter.valueChanges.subscribe((SubmissionFromDateFilterValue) => {
              this.filteredValues['SubmissionFromDate'] = SubmissionFromDateFilterValue;
              this.dataSource.filter = JSON.stringify(this.filteredValues);
            });

            this.SubmissionToDateFilter.valueChanges.subscribe((SubmissionToDateFilterValue) => {
              this.filteredValues['SubmissionToDate'] = SubmissionToDateFilterValue;
              this.dataSource.filter = JSON.stringify(this.filteredValues);
            });



        this.dataSource.filterPredicate = this.customFilterPredicate();

        this.dataSource.sort = this.sort;


      }

customFilterPredicate() {
.....
}

错误显然在倒数第二行。 messageService 是我用来检索数据的服务，其余代码是在任何列的值发生变化时过滤数据。在此之下，我的 customFilterPredicate 函数定义了每列的过滤器。

我不明白这是什么问题。我已经在 ngOnInit 中定义了 dataSource，为什么会出现错误以及如何解决？

【问题讨论】：

标签： angular asynchronous angular-material observable

【解决方案1】：

当这行“this.dataSource.filterPredicate = this.customFilterPredicate();”时，来自您的服务的调用没有返回执行...

我们知道异步调用可能需要一些时间（与获取硬编码数据相比）...

this.dataSource.filterPredicate = this.customFilterPredicate();
this.dataSource.sort = this.sort;

尝试将这两行（上面）放在服务调用 finally 块中，我还包含了一个错误块，您应该始终必须处理任何错误...

   this.messageService.getMessageTableData().subscribe(
          response => {
            this.dataSource = new MatTableDataSource(response);
            console.log(response);
          }
          ,errorResponse => { console.log(errorResponse); }
          ,()=> { 
            this.dataSource.filterPredicate = this.customFilterPredicate();
            this.dataSource.sort = this.sort;
            }
            );

【讨论】：