Question

我在Angular上写了一个服务。在服务类中声明变量：

private tariffCache: {id: number, observable: Observable<Tariff>}[] = [];

（注意ID）

在函数中填写此变量：

getTariff(id: number): Observable<Tariff> {
    if (!this.tariffCache || !this.tariffCache.find(x => x.id === id)) {
      const url = ${this.tariffsUrl}/${id};
      this.tariffCache.push({
        id,
        observable: this.http.get<Tariff>(url, this.httpOptions)
          .pipe(shareReplay(1))
      });
    }
    return this.tariffCache.find(x => x.id === id).observable;
  }

在ID = 34的服务器响应后，我希望在变量'tariffCache'中看到什么？

{id: 34, observable: Observable}

对！但实际上：

{id: "34", observable: Observable}

哇？为什么现在字符串是34？什么时候转换成字符串？但这不是全部！我重复使用id = 34调用此函数。34是数字，否则编译器会引发错误。函数“ getTariff”中的所有代码均有效！使用比较运算符“ ===”可以正常使用功能'find'。数组包含具有字符串ID的对象，并查找具有数字ID的元素。 Brrrr ...

我用功能“ find”的相同代码编写了其他功能，但它不起作用。什么？为什么不现在呢？

好，我将getTariff函数更改为：

getTariff(id: number): Observable<Tariff> {
    if (!this.tariffCache || !this.tariffCache.find(x => x.id === +id)) {
      const url = ${this.tariffsUrl}/${id};
      this.tariffCache.push({
        id: +id,
        observable: this.http.get<Tariff>(url, this.httpOptions)
          .pipe(shareReplay(1))
      });
    }
    return this.tariffCache.find(x => x.id === +id).observable;
  }

现在数组包含具有数字ID的对象，其他函数也可以使用数组。有人可以解释这种“ id”和“ find”行为吗？谢谢。

UPD：从服务中的函数“ changeCurrentTariff”调用函数“ getTariff”。在更改“ getTariff”之前，功能“ clearTariff”不起作用。这是服务中的代码片段：

export class TariffService extends AbstractModelService {
  private tariffsUrl = environment.baseUrl + 'api/Tariffs';
  private tariffCache: {id: number, observable: Observable<Tariff>}[] = [];
  private tariffSource = new BehaviorSubject<Tariff>(null);
  constructor(private http: HttpClient) {
    super();
  }
  currentTariff = this.tariffSource.asObservable();
  changeCurrentTariff(id: number) {
    if (id) {
      this.getTariff(id)
        .subscribe(tariff => {
          this.tariffSource.next(tariff);
        });
    }
  }
  /** GET tariff by id. Will 404 if id not found */
  getTariff(id: number): Observable<Tariff> {
    if (!this.tariffCache || !this.tariffCache.find(x => x.id === +id)) {
      const url = `${this.tariffsUrl}/${id}`;
      this.tariffCache.push({
        id: +id,
        observable: this.http.get<Tariff>(url, this.httpOptions)
          .pipe(shareReplay(1))
      });
    }
    return this.tariffCache.find(x => x.id === +id).observable;
  }
  clearTariff(id: number) {
    if (this.tariffCache) {
      const index = this.tariffCache.findIndex(x => x.id === +id);
      if (index >= 0) {
        this.tariffCache.splice(index, 1);
      }
    }
  }
}

但是组件中的“ changeCurrentTariff”调用是

export class TariffComponent implements OnInit, OnDestroy {
  constructor(
    private route: ActivatedRoute,
    private tariffService: TariffService,
  ) { }

  ngOnInit() {
    this.route.params
        .pipe(
          takeUntil(this.unsubscribe)
        )
        .subscribe(params => {
          if (params.id) {
            this.tariffService.changeCurrentTariff(params.id);
          }
        });
  }
}

Answer 1

AFAIK路线参数始终被解析为字符串，因此在这里

    this.route.params
        .pipe(
          takeUntil(this.unsubscribe)
        )
        .subscribe(params => {
          if (params.id) {

您需要将id明确转换为数字。

在打字稿中创建对象时意外将数字转换为字符串

1 个答案: