【问题标题】:Resolve id in pipe with a service使用服务解析管道中的 id
【发布时间】:2016-12-22 08:22:32
【问题描述】:

我将使用管道解析 ID。

我认为这不是每次调用服务/api 的最佳方式吗?

以前存储所有国家会更好吗?如何在管道中返回国家名称?

服务:

getCountry(id:number) {
   return this._http.get(this.apiUrl + "/country/" + id).map(res => res.json());
}

管道:

export class ResolvePipe implements PipeTransform {
  constructor(public _formDataService: FormDataService) {}
  transform(value: number, args: any[]): any {
    this._formDataService.getCountry(value).subscribe(
      data => console.log(data[0].name)
    )
  }
}

编辑:

<tr (click)="showProfile(customer)" *ngFor="let customer of (customers | search:term)">
   <td>...</td><td>{{customer.country_id | resolve | async}}</td>
</tr>

【问题讨论】:

    标签: angular angular2-pipe


    【解决方案1】:

    首先您需要返回一个Observable。当您调用 subscribe() 时,将返回 Subscription。此外,您实际上需要从transform() 返回一些东西,因此添加了return

    export class ResolvePipe implements PipeTransform {
      constructor(public _formDataService: FormDataService) {}
      transform(value: number, args: any[]): any {
        // added `return` and changed `subscribe` to `map`
        return this._formDataService.getCountry(value).map(
          data => {
            console.log(data[0].name);
            return data; // with `{ }` explicit `return` is required
          });
        )
      }
    }
    

    那么你就可以像这样使用管道了

    <div>{{someId | myIdPipe | async}}</div>
    

    或

    <some-comp [idProp]="someId | myIdPipe | async></some-comp>
    

    async 管道订阅从transform 返回的Observable,并将结果值用于绑定。

    【讨论】:

    • 谢谢你,工作,但它很慢。我可以做些什么来加快性能?
    • 很难从这里判断什么是慢的。服务器的响应需要这么长时间吗?管道是否经常执行以致减慢您的应用程序速度。我不能从这里判断。你可以在FormDataService 中维护一个缓存,就像在stackoverflow.com/questions/36271899/… 中讨论的那样
    • 是的,它被调用了大约 1000 次。缓存应该可以解决这个问题。
    • 会很有趣为什么它经常被调用。您是在这么多绑定上使用它还是 value 经常更改? Angular 本身不会多次调用管道。也许你已经设置了pure: false,这使得 Angular 在每次更改检测运行时都执行管道——这很常见。
    • 我更新了我的帖子。我在 for 循环中使用过滤器。
    猜你喜欢
    • 2020-06-03
    • 1970-01-01
    • 1970-01-01
    • 2017-02-13
    • 2015-08-13
    • 1970-01-01
    • 1970-01-01
    • 2021-02-28
    • 2022-07-27
    相关资源
    最近更新 更多