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

Question

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

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 的查找元素。呜呜……

我用与函数 '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' 的这种行为吗？谢谢。

更新：从服务中的函数 'changeCurrentTariff' 调用函数 'getTariff'。函数 'clearTariff' 在更改 'getTariff' 之前不起作用。这是服务中的代码片段：

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 转换为数字。

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

Unexpected convert numeric to string on object create in typescript

string

numeric

converters

typescript

angular