Angular RxJS flatMap这个_this

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular RxJS flatMap这个_this相关的知识,希望对你有一定的参考价值。

我试图用flatMap链接2个订阅,但flatMap中的“this”不是指我的组件,而是指MergeMapSubscriber。在运行时_this引用我的组件,但如果我在我的代码中使用它,TypeScript不会编译

import { flatMap } from 'rxjs/operators';

this.payexMasterService.queryOk().flatMap(
        (res: ResponseWrapper) => {
            _this.templateData.dataSets[0].data[0] = res.json;
            return _this.payexMasterService.queryError();
        }
    ).subscribe(
        (res: ResponseWrapper) => {
           this.templateData.dataSets[0].data[1] = res.json;
           this.data = Object.assign({}, this.templateData);
        },
        (res: ResponseWrapper) => this.onError(res)
    );

完整的代码......

@Component({
    selector: 'pay-pie',
    templateUrl: './payex-master-pie.component.html',
    styleUrls: []
})
export class PayexMasterPieComponent implements OnInit {
    numOk: number;
    numError: number;
    currentAccount: any;
    eventSubscriber: Subscription;
    data: any;
    options: any;
    templateData: any;



    constructor(
        private payexMasterService: PayexMasterService,
        private jhiAlertService: JhiAlertService,
        private eventManager: JhiEventManager,
        private principal: Principal
    ) {

        this.templateData = {
                labels: ['OK', 'Error'],
                datasets: [{
                    data: [0, 0],
                    backgroundColor: [
                        '#36A2EB',
                        '#FF6384',

                    ],
                    hoverBackgroundColor: [
                        '#36A2EB',
                        '#FF6384',

                    ]
                }]
            };
}

    loadAll() {
        this.payexMasterService.queryOk().pipe(flatMap(
            (res: ResponseWrapper) => {
                this.templateData.dataSets[0].data[0] = res.json;
                return this.payexMasterService.queryError();
            }
        )).subscribe(
            (res: ResponseWrapper) => {
               this.templateData.dataSets[0].data[1] = res.json;
               this.data = Object.assign({}, this.templateData);
            },
            (res: ResponseWrapper) => this.onError(res)
        );


    }

    ngOnInit() {
        this.loadAll();
        this.principal.identity().then((account) => {
            this.currentAccount = account;
        });
    }


    private onError(error) {
        this.jhiAlertService.error(error.message, null, null);
    }
}

额外的细节,所以堆栈溢出将接受发布

答案

要访问组件的this,您应该使用管道功能。 .pipe(flatMap(...))

该运算符在新版本的rxjs中称为mergeMap。 https://www.learnrxjs.io/operators/transformation/mergemap.html

以上是关于Angular RxJS flatMap这个_this的主要内容,如果未能解决你的问题,请参考以下文章

Angular rxjs Observable.timer 不是具有导入功能的函数

Angular2 RxJS 得到“Observable_1.Observable.fromEvent 不是函数”错误

如何在 angular2 中进行连续的 http api 调用?

为啥我们需要使用 flatMap?

在 Angular 中使用 Rxjs 进行基本状态管理

将订阅响应作为参数发送到方法 Angular/rxJs