首页 > 解决方案 > Angular:使用路由过滤

问题描述

我将数据(pgee2020)中的 id 值传递给我的路线。下一步是将此值用作第二个表 (zawpl) 的过滤器。最好的方法是什么?我尝试使用其中一个教程来处理它,但没有任何成功。

服务.ts

  getRider(id) : Observable<any> {
    return this._http
        .get<any>("http://node.gurustats.usermd.net:60519/pgee2020")
        .pipe(
            map(result => result.data.filter(p=> p.id == id)[0])
      );
}

getZawpl() {
  return this._http
    .get("http://node.gurustats.usermd.net:60519/zawpl").pipe(
    map(res => res ['data']))
}

组件.ts

import { Component, OnInit } from "@angular/core";
import { Rider } from "../interfaces/rider";
import {DetailRider} from "../interfaces/detailrider";
import { SpeedwayService } from "../../speedway.service";
import { ActivatedRoute } from "@angular/router";
import { OrderPipe } from "ngx-order-pipe";

@Component({
  selector: "gs-zawpgee2020",
  templateUrl: "./zawpgee2020.component.html",
  styleUrls: ["./zawpgee2020.component.less"]
})
export class ZawPgee2020Component implements OnInit {
  zawpl: Array<any>;
  rider: Rider;
  detailrider: DetailRider;
  order: string = "ZAWODNIK";
  reverse: boolean = false;

  constructor(
    private _speedwayService: SpeedwayService,
    private orderPipe: OrderPipe,
    private route: ActivatedRoute)
    {this._speedwayService.getZawpl().subscribe(response => (zawpl => zawpl.filter(zawpl.id === this.rider.id)) 
      == (orderPipe.transform(response, "ZAWODNIK")))}

ngOnInit() {
  this.loadZaw();
  console.log(this.rider)
}

loadZaw() {
  const id = +this.route.snapshot.params['id'];
  this._speedwayService.getRider(id).subscribe((rider) => {
    this.rider = rider;
})}
setOrder(value: string) {
  if (this.order === value) {
    this.reverse = !this.reverse;
  }
  this.order = value;
}
}

标签: angularfilterroutes

解决方案


推荐阅读