小编ber*_*rno的帖子

我想通过对服务器的 API 调用来验证优惠券代码，但首先我必须检查用户会话，因为我需要用户使用有效的会话令牌登录。如果会话已过期，我想显示登录对话框并完成流，可能无需输入订阅函数的下一个回调，如果会话仍然有效，我想调用 API 来验证优惠券并执行中的代码订阅函数的下一个回调。

applyCouponCode() {
  const user = this.auth.getUser();
  if (user) { //verify if user is logged in
    if (this.couponCode.length !== 0) {
      this.auth.checkSession() //API call to verify if user session is still valid
        .pipe(
          tap((sessionValid) => {
            if (!sessionValid) {
              //session expired
              this.auth.clientLogout();
              this.auth.showLoginDialog();
            } else {
              //session valid, call the API to validate the coupon code
              mergeMap(() => this.reservation.validateCouponCode(this.couponCode, user.token));
            }
          })
        )
        .subscribe(
          discountCode => {
            if (discountCode.valid) {
              //create the discount code obj and …

我有一个 Tour 数组，它由组件中的 API 用远程数据初始化。

tours: Tour[] = [];
filteredOptions: Observable<Tour[]>;

constructor(
  private api: APIService,
) { }

ngOnInit() {
  this.api.getTours().subscribe(
   data => { this.tours = data; this.filteredOptions = of(data); }
  );
}

这些旅行将显示在具有自动完成功能的垫子输入中

<mat-form-field class="long tour-sel">
   <input matInput type="text" [formControl]="myControl" [matAutocomplete]="tourList" placeholder="Select a tour"/>
</mat-form-field>
<mat-autocomplete #tourList="matAutocomplete">
   <mat-option *ngFor="let tour of filteredOptions | async" [value]="tour">{{tour.name}}</mat-option>
</mat-autocomplete>

在组件中，这是侦听更改和过滤选项的简单代码

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  map(value => this._filterTour(value))
);
private _filterTour(value: string): Tour[] {
   const filterValue = value.toLowerCase();
   return this.tours.filter(option => option.name.toLowerCase().includes(filterValue));
} …