From ngOnchanges I called the method _generateLocationFormForApproval and it has an output which is this.absoluteUri. After calling _generateLocationFormForApproval the next call is _pageEventDealsForApprovalList. Now I want to access the result from _generateLocationFormForApproval whic is this.absoluteUri inside _pageEventDealsForApprovalList after its result but it is giving me undefined although this.absoluteUri has a value.
Why is this.absoluteUri undefined inside _pageEventDealsForApprovalList ?
Any idea ? with the asynchronous call ? Thansk.
#code
ngOnChanges(changes: SimpleChanges): void {
if(this.dealId) {
this._generateLocationFormForApproval();
this._pageEventDealsForApprovalList();
}
}
private _generateLocationFormForApproval() {
this.dealService.generateLocationSubmission(this.dealId)
.subscribe({
next: (res) => {
if (res.isSuccess) {
this.absoluteUri = res.data.absoluteUri;
}
},
error: err => this.notificationService.showError(err),
complete: noop,
});
}
private _pageEventDealsForApprovalList() {
console.log("1")
console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
this.searchInput = '';
const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
this.dealType = [];
this.isLoading = true;
this.dealService
.getAllDeals(
status,
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs,
this.dealType
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe((res) => {
if(res) {
console.log("this.uri" , this.absoluteUri)
}
}, (err) => this.notificationService.showError(err)
);
}
Try to use Promise to call two API asynchronously.
Use this code
ngOnChanges(changes: SimpleChanges): void {
if(this.dealId) {
this._generateLocationFormForApproval().then((data)=>{
console.log(data)
if(data)
this._pageEventDealsForApprovalList();
}
}
}
private _generateLocationFormForApproval() {
return new Promise((resolve,reject)=>{
this.dealService.generateLocationSubmission(this.dealId)
.subscribe({
next: (res) => {
if (res.isSuccess) {
this.absoluteUri = res.data.absoluteUri;
resolve(this.absoluteUri);
}
},
error: err => {
this.notificationService.showError(err);
reject(err)
},
complete: noop,
});
})
}
private _pageEventDealsForApprovalList() {
console.log("1")
console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
this.searchInput = '';
const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
this.dealType = [];
this.isLoading = true;
this.dealService
.getAllDeals(
status,
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs,
this.dealType
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe((res) => {
if(res) {
console.log("this.uri" , this.absoluteUri)
}
}, (err) => this.notificationService.showError(err)
);
}
In this scenario I would recommend using the switchMap function from RxJs.
You would do something along the lines of this (warning: not tested):
ngOnChanges(changes: SimpleChanges): void {
// It was originally this, but if you're looking for changes to the dealId you should use changes.dealId instead
if (changes.dealId) {
this.dealService.generateLocationSubmission(this.dealId)
.pipe(
switchMap(res => {
if (!res.isSuccess) {
return of(res);
}
this.absoluteUri = res.data.absoluteUri;
return this._pageEventDealsForApprovalList(this.absoluteUri);
}),
finalize(() => (this.isLoading = false))
)
.subscribe(
res => {
if (res) {
console.log('this.uri', this.absoluteUri);
}
},
err => this.notificationService.showError(err)
);
}
}
private _pageEventDealsForApprovalList(absoluteUri): Observable<any> {
console.log('1');
console.log('this.absoluteUrithis.absoluteUri', this.absoluteUri);
this.searchInput = '';
const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED];
this.dealType = [];
this.isLoading = true;
return this.dealService.getAllDeals(
status,
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs,
this.dealType
);
}