学习 RXJS 管道和地图答案

【问题标题】：Learning RXJS pipe and map学习 RXJS 管道和地图
【发布时间】：2021-08-29 21:59:48
【问题描述】：

尝试使用其他管道和地图示例后，我陷入了困境：我的代码：

 this.http.post(this.baseUrl + 'account/login', dto)
  .pipe(
    map(val => {
    return new UserAuthenticatedDto;
    {
      var username = val.username;
      var token = val.token;
      var roles = val.roleslist;
      var knownAs = val.knownAs;
      this.toastr.success("Logged In Successfully", "", { positionClass: 'toast-bottom-right' });
      this.route.navigateByUrl('/splashPagePost');
    }
  }));

首先我不知道我是否可以在地图内调用 toastr、navigateByUrl 等类型函数（应该在地图之后 - 我认为 RXJS 操作员没有办法执行这些函数）？

它找不到用户名、令牌等。这让我觉得这些应该出现在 JSON 结果中？ UserAuthenticatedDto 确实有这 4 个字段。这不会那么难，但我试图模仿现有的代码，但它就是行不通。

所以两者都无法访问且未定义。我试过 map( val : UserAuthentcatedDto => ... 不走运

想法？提前致谢

【问题讨论】：

这有各种问题。如果我假设 UserAuthenticatedDto 是一个类.. 之后奇怪的是类构造函数参数.. 它应该类似于 UserAuthenticatedDto({val.username, ..de rest of those}).. 也许阅读更多关于在尝试像 RxJs 这样更复杂的东西之前，基本的 Javascript 语法..？

标签： angular rxjs pipe

【解决方案1】：

您的代码有很多问题。根据您的汇总，我只能在语法上帮助您。

所以当您map 时，您正在将您的回复更改为您喜欢的格式。在map 中，您不会显示 toast 通知或进行任何类型的路由。

在 subscribe 中，您可以从 observable 获得映射数据（在您的示例中，对从服务器返回的发布请求的响应）。

您通常会在订阅中处理 toast 通知和路由。

    this.httpClient.post<UserAuthenticatedDto>
        (urlExtension + 'account/login', dto)
        .pipe(map((response : PutTheTypeOfResponseHere) => ({
                  username: response.username,
                  token: response.token,
                  roles: response.roles,
                  knownAs: response.knownAs,
    })))
    .subscribe(value => {
           this.toastr.success("Logged In Successfully", "", { 
                  positionClass: 'toast-bottom-right' });
           this.route.navigateByUrl('/splashPagePost');
     })

【讨论】：

我继续收到错误，提示用户名在类型对象中不存在。有没有说响应是 JSON 类型的？还是我需要以某种方式转换它。
您看到错误的原因是 Typescript 没有明确知道响应的类型。因此，您必须指定包含username 的类型。我已更改答案以添加类型。添加这个应该可以修复错误。