【问题标题】:rxjs6 - TypeError: Cannot read property 'pipe' of undefinedrxjs6 - TypeError:无法读取未定义的属性“管道”
【发布时间】:2018-12-13 07:46:42
【问题描述】:

从 RxJs 5 测试版迁移到 RxJs 6 后出现以下错误 -

错误类型错误:无法读取未定义的属性“管道” 在 Object.get [as selectedTimecard]

这是我迁移后的最新代码

import {
  combineLatest as observableCombineLatest,
  Subscription,
  Observable
} from 'rxjs';

import {
  filter,
  take
} from 'rxjs/operators';

import Timecard from './../models/timecard';
import * as fromRoot from '../reducers';

@Component({
  selector: 'gte-timecards-overview-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
			<gte-timecard-week
				*ngIf="(hasTimecards$ | async) && !! (selectedTimecard$ | async)"
				[timecard]="selectedTimecard$ | async"
				[editable]="true"
				[hasPictureBackground]="true"
				[user]="user$ | async"
				(onCreateNewEntry)="createEntry($event)"
				(onEdit)="editEntry($event)"
				(onUpdateDay)="updateDay($event)"
				(onDeleteEntry)="deleteEntry($event)"
				(onCopyEntry)="copyEntry($event)">
			</gte-timecard-week>
		  `,
})
export class TimecardsOverviewPageComponent {
  @ViewChild('footerActions') footerActions;
  // User state
  user$: Observable < User > ;

  // Timecards state
  selectedTimecard$: Observable < Timecard > ;
  rawSelectedTimecard$: Observable < Timecard > ;

  routerSubscription: Subscription;
  requiresChangesCheck = true;
  selectedTimecardSate: string;

  constructor(private store: Store < fromRoot.State > , private router: Router, private translate: TranslateService) {
    this.user$ = store.select(fromRoot.getActiveUser);
    this.rawSelectedTimecard$ = store.select(fromRoot.getSelectedTimecard).pipe(filter(timecard => timecard !== null));

    // Add user depending fields to selected timecard
    this.selectedTimecard$ = Observable.combineLatest(this.user$, this.rawSelectedTimecard$, (user, timecard) => {
      if (!user || !timecard) {
        return;
      }
      let selected = null;
      if (!timecard.ID.includes('newTimecard')) {
        selected = timecard.clone();
        // Set user to selected timecard as owner
        selected.owner = user;

        // Set default settings for day settings
        let days = selected.days.map(day => {
          let newDay = day.clone();
          // TODO: set defaut values from API
          let defaultArrival = moment(day.date).set('hours', 9).set('minutes', 30);
          let defaultDeparture = moment(day.date).set('hours', 17).set('minutes', 50);
          let defaultBreakDuration = moment.duration(1, 'hours');
          let defaultBreakTaken = true;

          if (user.hasArrivalTimeSettings()) {
            newDay.arrivalTime = day.arrivalTime ? moment(day.arrivalTime) : defaultArrival;
            newDay.departureTime = day.departureTime ? moment(day.departureTime) : defaultDeparture;
            newDay.breakDuration = (day.breakDuration && moment.isDuration(day.breakDuration)) ? day.breakDuration : defaultBreakDuration;
            newDay.breakTaken = null;
          } else if (user.hasBreakTakenSettings()) {
            newDay.arrivalTime = null;
            newDay.departureTime = null;
            newDay.breakDuration = null;
            newDay.breakTaken = day.breakTaken !== null ? day.breakTaken : defaultBreakTaken;
          } else {
            newDay.arrivalTime = null;
            newDay.departureTime = null;
            newDay.breakDuration = null;
            newDay.breakTaken = null;
          }

          return newDay;
        });
        selected.days = days;
      }
      return selected;
    });
  }

  saveTimecard() {
    let selectedTimecard = this.selectedTimecard;
    this.footerActions.submitCard = false;
    if (this.pastTimecard !== null && this.footerActions.savePastTimecard) {
      this.footerActions.savePastTimecard = false;
      this.store.dispatch(new timecard.SaveAction(this.pastTimecard));
    } else {
      this.store.dispatch(new timecard.SaveAction(selectedTimecard));
    }
  }

  get selectedTimecard(): Timecard {
    let timecard: Timecard;
    console.log("selectedtcobs", this.selectedTimecard$)
    this.selectedTimecard$.pipe(take(1)).subscribe(selected => timecard = selected);

    return timecard;
  }
}

selectedTimecard() 中,selectedTimecard$ objservable 在使用管道/获取操作时导致问题。

请帮助我们解决这个问题。

【问题讨论】:

  • 不要使用 Observable.combineLatest().. 使用 observableCombineLatest()(您已导入但未使用的顶级函数)。
  • 我也是这样做的。但仍然遇到同样的错误

标签: angular angular6


【解决方案1】:

我们尝试按如下方式放置 try、catch 块,并且成功了。

get selectedTimecard(): Timecard {
  try {
    let timecard: Timecard;
    console.log("selectedtcobs", this.selectedTimecard$)
    this.selectedTimecard$.pipe(take(1)).subscribe(selected => timecard=selected);
    return timecard;
  } catch (error) {
  }
}

但我们认为这可能是错误的,因为我们不会处理此异常。

请大家有任何建议告诉我们。

谢谢, 阿尼尔

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-09
    • 1970-01-01
    • 2020-01-17
    • 2021-01-01
    相关资源
    最近更新 更多