标签: angular-observable

我正在开发角度应用程序，并尝试使用 RxObservable。下面是示例代码。

getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    });
}

现在这是一个 Angular 2 应用程序（单页应用程序）。当我重新加载页面时，上面函数的完整部分被调用，并且 this.accountDataLoaded 为 true。

但是，如果我移至其他组件并返回到此组件，则不会调用完整组件，并且 accountDataLoaded 保持 false。

我看到控制台上也没有错误，因为我正在记录错误，如您在上面看到的那样。

我认为该可观察对象上的过滤器或 takeUntil 函数导致了这种情况，但我不确定。

我正在使用 Angular 6 并且我正在尝试执行 patchValue 以使用来自可观察的 http 调用的数据填充我的表单。一切都很好，除了我有一个 secondaryPhone 值，该值可以是 null 填充可观察对象的 json。当它为空时，我收到错误“无法将未定义或空值转换为对象”。我知道如果每个值不为空，我可以单独手动修补它，但是有没有办法加载这个值而不必手动修补每个值？

模型.ts

export class UserInfoModel {
    userId: number;
    dob: Date;
    firstName: string;
    middleInitial: string;
    lastName: string;
    genderTypeId: number;
    ssnLast4: string;
    userAddresses: UserAddress[];
    primaryPhone?: Phone;
    secondaryPhone?: Phone;
    fax?: Phone;
}

export class Address {
    address1: string;
    address2: string;
    city: string;
    stateCd: string;
    zipCode: string;
    internationalAddress: string;
    countryId: number;
}

export class UserAddress {
    userAddressId: number;
    userId: number;
    active: boolean;
    address: Address;
}

export class Phone {
    phoneId: number;
    phoneTypeId: …

我有一个 Angular 5 站点，它从 REST API 接收数据，例如每个页面向 API 发出 1-4 个请求，发生的情况是请求有时需要很长时间（有时不需要）。

现在，所有请求都使用Observable在一个函数中执行：

return this.http.post(url, {headers: this.header})
        .map(res => res.json())      
        .catch(this.handleError)

我的问题是 - 是否因为正在使用 Observable 而导致缓慢的过程发生？会承诺将是更好的性能？或者在性能上下文中 Observable 和 Promise 之间没有区别吗？

我发现自己对尝试设置一个非常简单的 rxjs 订阅流程感到困惑。将多个不相关的订阅嵌套到另一个订阅中。

我在一个有角度的应用程序中，在进行其他订阅之前我需要填写一个主题。

这将是我想要实现的嵌套版本。

subject0.subscribe(a => {

    this.a = a;

    subject1.subscribe(x => {
        // Do some stuff that require this.a to exists
    });

    subject2.subscribe(y => {
        // Do some stuff that require this.a to exists
    });

});

我知道嵌套订阅不是一个好的做法，我尝试使用flatMaporconcatMap但并没有真正了解如何实现这一点。

我收到以下错误

类型“(user: User) => void”的参数不可分配给类型“(value: User, index: number) => ObservableInput”的参数。类型“void”不可分配给类型“ObservableInput”。

 getCurrentUserDb()
  {
    return this.login.authState.pipe(
                        switchMap(user=>{
                          return this.serviceUsers.getUserByuid(user.uid);
                        }),
                        map(user=>{
                          return user;
                        })
    )
  }

我的网站上有一个表格（人名、姓氏、出生日期、性别、公民身份等）。我的问题是我如何观察整个形式的变化并从观察中得到两件事：

• formControl 及其当前状态

• 处理的 formControl 的当前值

  前缀 {{availablePrefix}}

        <div class="col">
          <label for="firstName">First Name<span style="color: red"> *</span> </label>
          <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
        </div>
  
        <div class="col">
          <label for="middleName">Middle Name</label>
          <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
        </div>
  
        <div class="col">
          <label for="lastName">Last Name<span style="color: red"> *</span> </label>
          <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
        </div>
  
        <div class="col">
          <label for="suffix">Suffix</label>
          <select formControlName="party.suffix" id="suffix">
            <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
            </option>
          </select>
        </div>
      </div>
    </form>
  

  Run Code Online (Sandbox Code Playgroud)

感谢您的任何帮助

介绍

我正在尝试Angular2+使用来自共享服务的 Observable创建一个路由保护，该服务保存当前用户角色的字符串值。
问题显然在于将我的注意力从 Promises 转移到 Observables。

到目前为止，我所做的都是基于启发式和尝试错误的方法，但我通过杀死浏览器来解决问题感谢 danday74

.

尝试（感谢@danday74 改进）

借助相当于promise.then()的RxJS 序列？我已经将我想做的事情翻译成这个链：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | boolean {
        return this.auth.isRoleAuthenticated(route.data.roles)
            .mergeMap((isRoleAuthenticated: boolean) => {
                return isRoleAuthenticated ? Observable.of(true) : this.auth.isRole(Roles.DEFAULT_USER);
            })
            .do((isDefaultUser: boolean) => {
                const redirectUrl: string = isDefaultUser ? 'SOMEWHERE' : 'SOMEWHERE_ELSE';
                this.router.navigate([redirectUrl]);
            })
            .map((isDefaultUser: boolean) => {
                return false;
            });
    }

题

如果 ，如何停止可观察链的进一步传播isRoleAuthenticated = true？如果满足此类条件，我需要返回该布尔值，并确保.do之后不调用运算符块。
限制是必须从canActivate警卫返回布尔值。

我有一个 HTTP 拦截器，在每次请求之前，我检查访问令牌是否已过期，如果是，我从我的服务订阅 http.post 调用，然后订阅它，当我获得新的访问令牌时，我将调用下一个。像这样处理（请求）：

        this.auth.refreshAccessToken().subscribe((token: string) => {
          this.auth.newAccessToken = token;
          request = request.clone({
            setHeaders: {
              Authorization: `Bearer ${token}`
            }
          });
          return next.handle(request);
        });

问题是它正在抛出 TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

这让我觉得我在那里打错了 http.post 调用。

编辑 1：我还没有机会彻底测试这个，但到目前为止似乎一切正常。在返回整个地图之前我有一个 console.log 但它没有触发，但是，其他一切都有效，并且每次我获得新的访问令牌并且 DID 发生时，我都会在任何地方更新 currentUser/权限，因此出于所有意图和目的，它似乎工作，这是更新的代码：

          mergeMap(token => {
            this.auth.newAccessToken = token;
            request = request.clone({
              setHeaders: {
                Authorization: `Bearer ${token}`
              }
            });
            return next.handle(request);
          })

问题 - 基于Angular 文档，什么时候对我的 observable 使用 next 和 complete 更合适？

我正在查看某人的 Angular 7 项目，我看到很多如下所示的代码，其中一些调用使用 next，有些调用使用 complete，我试图根据Angular 文档了解何时使用适当的调用，因为 next 是“必需的”，而 complete 是“可选的”。

login() {
  this.authService.login(this.model).subscribe(next => {
    this.alertService.success('Logged in successfully');
  }, error => {
    this.alertService.danger(error);
  }, () => {
    this.router.navigate(['/home']);
  });
}

register() {
  this.authService.register(this.user).subscribe(() => {
      this.showRegistrationComplete = true;
    }, error => {
      // handle the error code here
    }
  );
}

在某些情况下，我看到“下一步”，而在某些情况下，我看到“()”已完成订阅。

上面的这两个调用都在下面调用它们（将方法发布到控制器）

login(model: any) {
    return this.http.post(this.baseUrl + 'login', model).pipe(
      map((response: any) => { …

我在我的项目中遇到了一个非常奇怪的行为，我有一个简单的 Angular 服务，代码如下：

seatClick$ = new Subject<Seat>();

以及服务上触发 observable 的方法：

  handleSeatClick(seat: Seat) {
    this.seatClick$.next(seat);
  }

可观察到的逻辑很简单：

this.seatClick$.pipe(
    exhaustMap((seat: Seat) => {
       this.someFunctionThatThrowsException(); // this function throws ref exception
      return of(null);
    })
    , catchError(err => {
        console.log('error handled');
        return of(null);
    })
)
.subscribe(() => {
    console.log('ok');
  },
  (error1 => {
    console.log('oops');
  })
);

这真的很奇怪，当调用“someFunctionThatThrowsException”时，它会抛出一些ReferenceError异常，然后用catchError捕获该异常并触发next()事件。

然而，从此时开始，seatClick observable 停止响应，就好像它已经完成一样，在服务上调用handleSeatClick 将不再响应。

我在这里缺少什么？