javascript - 过滤 Angular json 7

Question

我正在开始一个 Angular 应用程序 7，初学者 Angular 。我正在从 api 进行调用(例如)并将结果存储在本地存储中。到目前为止，一切都很好。保存后，我需要在名为 pdv 的字段中创建一个过滤器。

我无法按原样实现过滤器，它说过滤器不是查看器的一部分。你能给我一个小费吗？

这是我的代码:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, startWith } from 'rxjs/operators';

const CACHE_KEY = 'httpSalesCache';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  repos;

  constructor(http: HttpClient){

    const path = 'http://www.mocky.io/v2/x';
    this.repos = http.get<any>(path)

    .pipe(map(data => data.items));

    this.repos.subscribe(next => {
      localStorage[CACHE_KEY] = JSON.stringify(next);
    });

    this.repos = this.repos.pipe(
      startWith(JSON.parse(localStorage[CACHE_KEY] || '[]'))
    ) 
  }
}

这是调用 http 的返回:

{"items":[
{"pdv": 1, 
    "status": "a"
}]}

Answer 1

您可以使用 TypeScript 内置的 filter() 函数来做到这一点。来源:https://www.tutorialspoint.com/typescript/typescript_array_filter.htm

const data = {
  "items": [
    {
      "pdv": 1,
      "status": "a"
    }]
};

const filterValue = 1;
const result = data.items.filter(element => {
  return element.pdv === filterValue;
});

result 将包含一个包含属性 pdv 且值为 1 的所有 items 的数组；

编辑，在您发表评论后更新

编辑 2 我意识到你不需要变量来存储结果，你可以只更新可观察的

filterValue = 1;

path = 'http://www.mocky.io/v2/x';
this.repos = http.get<any>(path).pipe(
        map(data => { 
            data.items = data.items.filter(element => {
                return element.pdv === filterValue;
              });
        }));
}