Angular RxJS flatMap这个_this

Question

I am trying to chain 2 subscribes with a flatMap but the "this" inside the flatMap does not refer to my component but to MergeMapSubscriber. At runtime _this refers to my component but if I use that in my code TypeScript does not compile

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)
    );

the full code ...

@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);
    }
}

extra details so stack overflow will accept post

Answer 1

To access to the this of your component, you should use the pipe function. .pipe(flatMap(...)) .

The operator is called mergeMap in the new version of rxjs. https://www.learnrxjs.io/operators/transformation/mergemap.html