标签: rxjs6

当我尝试partition在打字稿中使用rxjs6时,会抛出类型错配.此外,官方文档中的示例抛出了该错误.我想我必须投一些东西,但我不知道是什么.有什么建议？

import {fromEvent} from 'rxjs';
import {partition} from 'rxjs/operators';

document.body.innerHTML = "<DIV width=100 height=100></DIV>"


//Example Code from https://rxjs-dev.firebaseapp.com/api/operators/partition
const clicks = fromEvent(document, 'click');
const parts = clicks.pipe(partition(ev => ev.target.tagName === 'DIV'));
const clicksOnDivs = parts[0];
const clicksElsewhere = parts[1];
clicksOnDivs.subscribe(x => console.log('DIV clicked: ', x));
clicksElsewhere.subscribe(x => console.log('Other clicked: ', x)); 

错误:

类型'UnaryFunction,[Observable,Observable]>'的参数不能分配给'OperatorFunction'类型的参数.类型'[Observable,Observable]'不能分配给'Observable'类型.类型'[Observable,Observable]'中缺少属性'_isScalar'.

请参阅https://stackblitz.com/edit/typescript-fdqhws

我不明白如何处理我订阅的对象。对象是以下结构：

{
  data:{
       date: "2018-02-20 13:10:23",
       text: "????????",
       id: 1,
       items: [
              0: {
                 date: "2018-02-20 13:10:23",
                 text: "????????",
                 images: [
                         0: "image1.jpg",
                         1: "image2.jpg"
                         ],
                 name: "???????????",
                 type: "images"
                 },
              1: {
                 date: "2018-02-20 13:10:23",
                 text: "????????",
                 image: null,
                 type: "video",
                 url: "https://www.youtube.com/embed/v64KOxKVLVg"
                 }
              ]
       }
}

我通过服务提出上诉：

import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
@Injectable()
export class VideoService {
    constructor(private http: HttpClient) {}

    getVideoTape() {
        return this.http.get(`http://ip_adress/api/v1/mixed_galleries/1`);
    }
}

有一个接口模型：

export class VideoListModel {
    constructor(
        public created_at: …

我是 angular 6 和 ngrx 商店的新手。我尝试在从商店订阅数据后分派动作，但它会导致无限循环并使浏览器崩溃？我错了什么。一些解决方案我发现它使用 rxjs 的 do/tap 运算符，但仍然无法正常工作。例如，当我使用 {{(feedState | async).loading}} 时，它总是返回 undefined 。

我的组件：

  ngOnInit() {
    this.store.dispatch(new FeedActions.GetFeedCategories());
    this.feedSubscription = this.store
      .pipe(
        select('feed'),
        map(data => {
          this.feedState = data;
          return data.categories;
        }),
        tap(data =>
          this.store.dispatch(
            new FeedActions.GetFeedItems({
              cat_id: data[this.selectedIndex],
              page: 0
            })
          )
        )
      )
      .subscribe(data => {});
  }

我试图使用RxJS groupBy运算符，然后concatMap根据一些键将记录收集到单独的组中。

我注意到，当concatMap跟随groupBy运算符时，似乎会丢失第一个键之后出现的所有键的数据。

例如：

考虑以下代码块：

// DOES NOT WORK
const records = ['a:1', 'b:2', 'c:3', 'd:1', 'e:2', 'f:3', 'g:1'];
const clicks = new Subject();

const result = clicks.pipe(
  groupBy(x => x.substr(2,1)),
  concatMap(ev$ => ev$.pipe(map(x => ({key: ev$.key, value: x})))),
);
const subscription = result.subscribe(x => console.log(x));

records.forEach(x => clicks.next(x));

// Expected Output:
// { key: '1', value: 'a:1' }
// { key: '1', value: 'd:1' }
// { key: '1', value: 'g:1' } …

我有以下代码：

export class EventsChainComponent { 
    eventSubscriber:Subscription;

    constructor (protected eventService: EventService) {}


    public registerComponentsEvent(event:any) {
        // getOnEvent signature
        // (method) EventService.getOnEvent(): Observable<FormEvent>
        this.eventSubscriber = this.eventService.getOnEvent()
            .pipe(filter((formEvent: FormEvent) => {return formEvent.key == event.event}))
            .subscribe((formEvent: FormEvent) => {
                  ..........
            });
    }

当我编译时，编译器返回以下错误：

“MonoTypeOperatorFunction”类型的参数不可分配给“OperatorFunction”类型的参数。

所以，我搜索了一下，发现了RxJs6操作符过滤器 API：

export declare function filter<T, S extends T>(predicate: (value: T, index: number) => value is S, thisArg?: any): OperatorFunction<T, S>;
export declare function filter<T>(predicate: (value: T, index: number) => boolean, thisArg?: any): MonoTypeOperatorFunction<T>;

如您所见，过滤器作为 2 个重载方法，一个返回OperatorFunction …

我更新了我的材料角度项目以在我的表格中包含一个可扩展的细节行。为此，我需要升级到 rsjx 6。现在我收到以下错误。我对 angular 完全陌生，所以不幸的是我不知道如何解决这个问题。

Property 'merge' does not exist on type 'typeof Observable'.

任何人都可以帮助解决此错误吗？

app.component.ts

Property 'merge' does not exist on type 'typeof Observable'.

我正在尝试创建一个可重用的 Modal 组件。在 ModalService 中，我有一个主题，以及一个在主题上调用 next() 的方法。ModalComponent 订阅该主题，但是每当调用服务中的方法时，观察者的下一个函数都会触发两次。有谁知道这是什么原因造成的？

export class ModalService { 
  openModal = new Subject(); 

  constructor() { } 

  open(cmp) { 
     this.openModal.next(cmp); 
   } 
}

模态组件：

export class ModalComponent implements OnInit {
  component: ComponentRef<any>;

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;

  constructor(
    private resolver: ComponentFactoryResolver,
    private modalService: ModalService
  ) {}

  ngOnInit() {
    this.modalService.openModal.subscribe(cmp => {

      // CALLD TWICE EVRY TIME THE SERVICE CALLS .next()
      console.log(cmp);
    });
  }

我正在使用 rxjs6 升级到 angular7：在mouseWheelEvent我得到的类型中"Property 'wheelDelta' does not exist on type 'WheelEvent'"。

我们有其他选择wheelDelta吗？

mouseWheelFunc(event: MouseWheelEvent): void {

    //  var event = window.event || event; // old IE support

    let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

    if ( delta > 0) {
      this.mouseWheelUp.emit(event);
    } else if ( delta < 0) {
      this.mouseWheelDown.emit(event);
    }

    // for IE
    event.returnValue = false;
    // for Chrome and Firefox
    if ( event.preventDefault) {
      event.preventDefault();
    }
  }

src/modules/components/numeric-stepper/mousewheel.directive.ts(23,49) 中的错误：错误 TS2339：“WheelEvent”类型上不存在属性“wheelDelta”。

我需要来自两个来源的数据组合成一个res: {data1: any, data2: any}对象，即使其中一个来源不发出任何值，我也需要实现这一目标

xxx (
    source1,
    source2,
    (data1, data2) => ({data1: data1, data2: data2})
).subscribe(res => {
    doSomething1(res.data1)
    doSomething2(res.data2)
})

combineLatest (
    source1.pipe(startWith(null)),
    source2.pipe(startWith(null)),
    (data1, data2) => ({data1: data1, data2: data2})
).subscribe(res => {
    if(res.data1) {
        doSomething1(res.data1)
    }
    if(res.data2) {
        doSomething2(res.data2)
    }
})