根据 Angular 中的查询参数显示数据

Question

我可以使用 Angular 中的查询参数过滤掉数据吗？ This.rows 是一个数组。我只会显示具有 "Pending" 查询参数的 this.rows。我将如何使用 queryParams 过滤掉它。下面是我的代码。

// this.rows is an array



this.activeRouter.queryParams
.filter(params => params.q)
.subscribe(params => {
  console.log(params);
  if(this.rows.status === params.q){
    return this.rows;
  }
});

Answer 1

您可以使用 ActivatedRoute 获取这样的查询参数，然后将其存储在一个变量中并使用过滤器获取行中的待处理条目。

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {
 queryParamsStatus ='';

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
        this.queryParamsStatus= params['status'];
        console.log(queryParamsStatus );

      });
    let tempRows = this.rows.filter(s => s.staus === this.queryParamsStatus);
  }

}

根据 Angular 中的查询参数显示数据

Show Data Based On Query Params in Angular

query-parameters

angular

angular6