As for right angular to call asynchronous method with a parameter from the html markup?

Angular project is an asynchronous method that makes the request, data for the parameter
async getAddressByCode(addressCode: string) {
 const address = await this.resourceService.getAddressByCode(addressCode).toPromise();
 return address;
}

How to call this method from html markup?
Tried so
<span>{{getAddressByCode(addressCode)}}</span>
the result on the page
[object Promise]
Tried and true
<span>{{async getAddressByCode(addressCode)}}</span>

This causes a parsing error Parser Error: Unexpected token 'getAdressByCode'

Anyway, is there a way to angulare cause normal async methods, not only RxJs?
April 4th 20 at 00:49
1 answer
April 4th 20 at 00:51
Solution
<span>{{ getAddressByCode(addressCode) | async }}</span>

AsyncPipe able to reveal the promises.
Of course the method will be called every time when testing modifications.


is there a possibility in angulare cause normal async methods, not only RxJs?

It's still Angular js and work with usenkami it is possible. But usually do not need because the are completely superfluous wrapper, just the rx.
Requests to use xhr, and event-driven nature is easily converted into rx stream.
Perhaps in some cases it works, but in my - no.
After adding this code in a loop get the error
ERROR Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

I assume that due to the fact that angular performs this method in your loop and each time is different objects.
({})==({}) // false
So this is a way to put the query method in the markup, a bad idea.
Had to rewrite the logic.

But usually do not need because the are completely superfluous wrapper, just the rx.

What I see in the code with regards to the queries are the queries a little more complicated single, I cause a horrible discomfort and the feeling that something is wrong. What trying a long time to go in js, using jq-rd ajax, where all of kolbeco and heaps of hard to read attachments to each other.

Here is a real piece of legacy code, and not very fancy.
code

generateDocument(fileFormControl: FormControl, reasonsRefusalGenFormArray: FormArray,
 subStageIdTask: string, document: Document,
 pregenFileData: PregenFileData) {
 return this.resourceService.rejectionReasonsDict$
.pipe(
 switchMap(reasonsDict => {
 if (!!reasonsRefusalGenFormArray) {
 const reasonsRefusal = reasonsRefusalGenFormArray.value.map(r =>
 ({...r, name: reasonsDict[r.code].name})
);
 document = {
...document
 main: {
...document.main,
 reasonsRefusal: reasonsRefusal
}
};
}
 const accountUGLR = document.main.userAccountUGLR;
 return combineLatest(
this.resourceService.getUsersByLogin(accountUGLR)
).pipe(
 switchMap(([userAccountUGLR]) => {
 return this.genDoc(subStageIdTask, document, pregenFileData, userAccountUGLR);
}
),
 map((response: any) => {
 const date = new Date();
 return {
 idFile: response.versionSeriesGuid,
 mimeType: response.mimeType,
 nameFile: response.fileName
 signed: false
 sizeFile: response.fileSize,
 typeFile: response.fileType,
 dateFile: date.getTime(),
};
}),
 tap(file => {
fileFormControl.setValue(file);
fileFormControl.markAsDirty();
 this.notifyService.success('the Document has been created');
})
);
}),
 catchError(err => {
 this.notifyService.error('Error the document!');
console.log(err);
 of return(err);
})
);
 }

Understand here something is outright impossible, we have some time to break eyes. I can only assume that maybe he's just not written well, but if he had written on the concept of async/await to make it unreadable so it would be much more problematic.

As for me, the code for async/await looks cleaner and citeme.

PS: If you judge the formulation of my question, Your answer should be faithful and though he does not fit in my case, I note the answer as a solution. - nea commented on April 4th 20 at 00:54
@nea,
After adding this code in a loop get the error

This post from AngularJS. And there all different

such a way to put the query method in the markup, bad idea

true.
There is a technique to perform queries directly from markup, but you have to understand what you are doing. I don't see the sense in them: no profit, no flexibility.

Here is a real piece of legacy code, and not very fancy

Normal code, but needs to be better formatted, typed and divided into several methods cleaned from superfluous variables.
combineLatest is not necessary, the attached pipe also.
On akankah will not be shorter and cleaner, much will be written because there is a very simple chain. But in complex cases will akankah or impossible to do (have to do the event), or gimmicks.
switchMap, map, tap are the labels in your code, that help to understand what function carry these fragments. - clyde.Sip commented on April 4th 20 at 00:57

Find more questions by tags Angular