Ошибка при создании трубы в угловых 6

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;
  }

}

И get-member-ship-level.pipe.spec.ts со ссылкой на нить, предложенную сэром @ GabrielMETZGER :

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 is

<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

Вы не должны подписываться на наблюдаемое внутри вашей угловой трубы.Вместо этого попробуйте следующее:

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));
        })
      ))
  }

}

==> Итак, я получил эту ошибку Возможно, есть некоторые пропущенные скобки.Не могли бы вы помочь мне решить эту ошибку?Большое спасибо.

И когда вы хотите использовать трубу, вы должны добавить асинхронную трубу позади

{{ yourvariable | getMemberShipLevel | async }}

Answer 2

Когда вы вызываете new GetMemberShipLevelPipe();, у вас нет аргументов в скобках, однако ваша функция getMemberShipLevel(id: number) должна принимать идентификатор. Когда вы вызываете GetMemberShipLevelPipe, вы должны поместить числовой идентификатор в скобки, чтобы она моглаиспользоваться во всей этой функции.