Javascript 在Angular App中使用观测值和过滤数组列表

我在我的Angular应用程序中使用了observables，它按预期工作。然而，我遇到了一个有点困惑的情况。在一个组件中，我成功订阅了可观察对象，然后过滤结果，如下所示：

this.clientsService.getAll()
    .subscribe(resRecordsData => {
        this.records = resRecordsData;
        this.inactiveRecords = this.records.filter(record => record.category && record.category.includes('inactive'));
        this.records = this.inactiveRecords;
    },
    responseRecordsError => this.errorMsg = responseRecordsError);

但是，在另一个组件中，当我执行几乎相同的操作时，控制台上会打印一个错误，内容如下：

异常：\ this.records.filter不是一个函数

这是该组件的外观：

optionReceived(option) {
    console.log('Consulting: ' + option.toolbarLabel);
    if (option.toolbarLabel === 'OT') {
        console.log('Consulting: OT Filter Activated!');
        this.clientService.getByCategory('consulting', 1, this.pagesize)
        .subscribe(resRecordsData => {
            this.records = resRecordsData;
            this.OTRecords = this.records.filter(record => record.type && record.type.includes('OT'));
            this.records = this.OTRecords;
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
    } else {
        return this.records;
}

---

第二种情况有什么问题？为什么我在那里得到错误而不是在第一种情况下？

这是因为异步性质，您可以使用skipWhile运算符

this.clientService.getByCategory('consulting', 1, this.pagesize)
    .skipWhile(data => {
         if(data.length) {
             return false;
         }
     })
    .subscribe(resRecordsData => {
        this.records = resRecordsData;
        this.OTRecords = this.records.filter(record => record.type && record.type.includes('OT'));

    },
    ((responseRecordsError) => {this.errorMsg = responseRecordsError});

注意：确保

this.records=[]被实例化

更新：
您不应分配
this.records=this.OTRecords在订阅中，因此出现未定义的错误

在第一种情况下，筛选的元素可能包含多个对象（数组），但在第二种情况下不包含，为什么不在订阅之前进行筛选

this.clientsService.getAll()
    .filter(record => record.category && record.category.includes('inactive'))
    .subscribe(
        resRecordsData => {
            this.records = resRecordsData;
        },
        err => this.errorMsg = err
    );

我相信Angular使用的是RxJS，如果您将鼠标悬停在上面，请参考
。在每种情况下，您都看到了数据类型吗？在这两个示例中它们是否不同？它们看起来相同：（属性）ConsultingComponent.records:两个组件中的任何[]“records”都设置为空数组。仍然会出现相同的错误。另外，如果异步是个问题，那么这对双方来说肯定都是个问题。我的观点是，第二个示例返回一个错误，而第一个示例没有。但是，不管怎样，问题是，为什么第二个示例返回一个错误而第一个示例没有返回？在这两种情况下，我都在订阅后进行过滤。所以这并不是问题所在。如果结果是单个项，则筛选器将对数组不起作用。你确定你在那里得到了一个收藏吗？可以放一个控制台。非常有趣。令我惊讶的是，这起作用了！非常感谢！