Question

我对Angle 6有新的了解。我目前正在从事Angle 6项目。我进入一种需要获取数据的情况，但是我在保留原始对象方面遇到问题。这是代码：

    this.loginService.categoryType$.subscribe((data) => {
     for(var i=0; i<this.listPosts.length; i++){
       if(this.listPosts[i]['categoryName'] == data){

       }else{
         this.listPosts.splice(i,1);
       }

     }

   });

HTML：

 <li class="nav-item" (click) = "selectedCategory('buy')"   style="cursor: pointer;">
              <a class="nav-link"  [ngClass]="{'active':selectedCat == 'buy'}">
              <i class="material-icons left-nav">
              shopping_cart
              </i>
              Buy
              </a>
           </li>
           <li class="nav-item" (click) = "selectedCategory('sell')"style="cursor: pointer;">
              <a class="nav-link" [ngClass]="{'active':selectedCat == 'sell'}">
              <i class="material-icons left-nav">
              shopping_basket
              </i>
              Sell
              </a>
           </li>

问题在于如何保留原始对象的值，因为数据已经被拼接了。

Answer 1

如果您需要保留原始列表以及经过过滤的列表，建议您将原始列表保存在变量中，然后使用rxjs方法显示经过过滤的

originalList$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
filteredList = [];

this.loginService.categoryType$.subscribe((data) => {
    this.originalList$.next(data);
});

this.originalList$.pipe(
map(data => yourLogicToFilter(data))
).subscribe(list => filteredList = list);

filteredList可以是一个Observable，因此您也可以在代码中使用异步管道。

也许甚至有更清洁的解决方案都包含rxjs，但这至少应该使您理解逻辑

Answer 2

根据我的理解，您想要获取数据，并且不想将存储在组件中的原始对象作为属性进行突变。在这种情况下，使用拼接会破坏您尝试执行的操作的目的，因为它会使对象发生变异。

您可以通过多种方式执行此操作，但是我将尽力使答案尽可能接近您的代码。如果我错了，请指正我，但据我了解，this.loginService.categoryType$是确定类别类型的观察对象或主题。由于您已经具有可观察的类别类型，因此可以在其上使用map并根据类别名称过滤this.listPosts。

    const listPosts$ = this.loginService.categoryType$.pipe(
       map(categoryType => this.listPosts.filter(
           listPost => listPost.categoryName === categoryType
       )),
    );

您可以在模板上使用listPosts$并对其进行管道异步处理。 listPosts$ | async

或者，您也可以像获取值一样，点击或订阅它，并将其分配给组件属性或变量。我个人不喜欢这种方法，因为您将流中的值存储在变量中。

    const listPosts$ = this.loginService.categoryType$.pipe(
       map(categoryType => this.listPosts.filter(
           listPost => listPost.categoryName === categoryType
       )),
    );

    listPosts$.subscribe(currentList => this.currentListPosts = currentList);

希望这会有所帮助！

以角度6过滤数据

2 个答案: