Question

我创建的管道类为 get-member-ship-level.pipe.ts ：

import { Pipe, PipeTransform } from '@angular/core';
import { UserService } from '../user.service';

@Pipe({
  name: 'getMemberShipLevel',
  pure: true
})           
export class GetMemberShipLevelPipe implements PipeTransform
{

  transform(value: number, args?: any): any
  {
      return this.getMemberShipLevel(value);
  }

  constructor(private userService: UserService) { }

  ngOnInit()
  {
      localStorage.removeItem("aze");
  }


  getMemberShipLevel(id: number): String
  {
      this.userService.getSexeLibelleByIdUser(id)
      .subscribe(data => 
      {
          let aa = data as string;
          console.log(" ________________ A:" + aa);
          localStorage.removeItem("aze");
          localStorage.setItem("aze", aa);
          console.log("________________ B:" + localStorage.getItem("aze"));
      }, error => console.log(" ________________ I GOT ERROR" + error));

      let sexe = localStorage.getItem("aze");
      console.log("Id: " + id+ " ________________ C: " + sexe);

      return sexe;
  }

}

引用the thread proposed by Sir @GabrielMETZGER的 get-member-ship-level.pipe.spec.ts 是：

import { GetMemberShipLevelPipe } from './get-member-ship-level.pipe';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
import { UserService } from '../user.service';
import { inject, TestBed } from '@angular/core/testing' 

describe('GetMemberShipLevelPipe', () => {
  let pipe: GetMemberShipLevelPipe

  beforeEach(() => {
    TestBed
      .configureTestingModule({
        providers: [UserService]
      })
  })

  it('should create an instance', inject([UserService], (translate: UserService) => {
    pipe = new GetMemberShipLevelPipe(translate)
    expect(pipe).toBeTruthy()
  }))
})

在 user.service.ts 中，我有：

getSexeLibelleByIdUser(id: number): Observable<String>
{
    return this.http.get(`${this.baseUrl}/users/id/${id}`, {responseType: 'text'});
}

getUsersList(): Observable<any>
{
    return this.http.get(`${this.baseUrl}/users`);
}

users-list.component.html 是

<table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Sexe</th>
        </tr>
      </thead>
      <tbody *ngIf="!loader">
        <tr *ngFor="let user of userbs | async" style="width: 1500px;">
          <td>{{user.name}}</td>
          <td>{{user.id | getMemberShipLevel}}</td>
        </tr>
      </tbody>
    </table>

其中userbs是在 users-list.component.ts 上定义的，例如：

this.userbs = this.userService.getUsersList();

我的问题是我对this output

所示的不同表行获得了相同的值

知道：男男。（错误的输出）
期望：男性，女性。（正确的输出）

能否请您告诉我我怎么想念的？预先感谢。

Answer 1

调用new GetMemberShipLevelPipe();时没有括号，但是函数getMemberShipLevel(id: number)需要输入ID，调用GetMemberShipLevelPipe时必须输入数字ID括号，以便可以在整个功能中使用。

Answer 2

您不应订阅Angular Pipe中的可观察对象。而是尝试以下操作：

import { Pipe, PipeTransform } from '@angular/core';
import { UserService } from '../user.service';

@Pipe({
  name: 'getMemberShipLevel',
  pure: true
})           
export class GetMemberShipLevelPipe implements PipeTransform
{

  transform(value: number, args?: any): any
  {
      return this.getMemberShipLevel(value);
  }

  constructor(private userService: UserService) { }

  ngOnInit()
  {
      localStorage.removeItem("aze");
  }

  getMemberShipLevel(id: number): String{
  {
      return this.userService.getSexeLibelleByIdUser(id).pipe(
        tap(data => {
          let aa = data as string;             
          localStorage.setItem("aze", aa);
        }),
        catch(err => {
          console.log(" ________________ I GOT ERROR" + error));
        })
      ))
  }

}

==>所以我得到了this error可能是缺少了一些括号。您能帮我解决这个错误吗？非常感谢。

当您要使用管道时，应在后面添加异步管道

{{ yourvariable | getMemberShipLevel | async }}

在角度6

2 个答案: