Question

ts中的数据模型：

export class PO {
  id: number;
  name: string;
  submitted: boolean = false;
}

服务，以获取所有订单

getPO() {
    return this.http
      .get<PO[]>(this.poUrl)
      .pipe(map(data => data), catchError(this.handleError));
  }

仅获得在此existing question之后

的那些 submitted = true

getSubmitted() {
    return this.http
    .get<PO[]>(this.poUrl)
    .pipe(map(data => data.find(data => data.submitted === true)), catchError(this.handleError));
  }

它仍然返回所有内容，尝试使用data.filter（），查找/过滤器无效。

Answer 1

目前尚不清楚您是如何getSubmitted()提供的注释来完全引用和呈现<li *ngFor="let p of PO">的结果的，因为数据模型对象称为{{1 }}，结果遍历一个也称为PO的变量。或根本没有分配到类型PO的局部变量。尝试以下操作来过滤和呈现具有布尔值PO[]的{{1}}属性的PO对象：

submitted

有两种方法可以用来消耗成功的true返回的数据。

getSubmitted() {
  return this.http
    .get<PO[]>(this.poUrl)
    .pipe(
      // tap(response => console.log(response)), to check/log structure before map()
      // assumes along lines of [{id:1, name:'foo', submitted:false}, {id:2, name:'bar', submitted:true}]
      map(data => data.filter(d => d.submitted)), 
      catchError(this.handleError)
    );
}

或者：

http.get()

这是Stackblitz，显示了基于submitted$: Observable<PO[]>; ngOnInit() { this.submitted$ = this.getSubmitted(); } // <li *ngFor="let p of submitted$ | async">的{{1}}对象属性的过滤功能。它提供了一个带有和不带有Async Pipe的示例。

希望有帮助！

Answer 2

您正在修改前端的API响应。很难在不同平台上进行管理。我更喜欢创建两个WebAPI服务。一种用于获取已提交标志为true的数据的方法。标记为假的第二项服务。

原因：将来，如果您打算开发移动应用，那么您也必须在移动应用中对逻辑进行硬编码。

服务数据应该是直接的。

Answer 3

data;
filteredData;

getPO() {
   return this.http.get<PO[]>(this.poUrl).subscribe(
      data => {
        this.data = data;
        this.filteredData = data;
      }
   );
}

getSubmitted() {
   this.filteredData = this.data.filter( el => el.submitted === true);
}

然后在您的html，ngFor中，如果必须迭代filteredData，

 *ngFor="let row of filteredData"

这样您就不会下载2次

警告***过滤器必须位于私有数组上，而不是从http调用返回的数据上。

如何使用TS / Angular进行过滤

3 个答案: