Как в angular правильно вызвать асинхронный метод с параметром из html разметки?

Question

[eRKa]

Ангуляр проект, есть асинхронный метод, который делает запрос данных по параметру

async getAddressByCode(addressCode: string) {
	const address = await this.resourceService.getAddressByCode(addressCode).toPromise();
	return address;
}

Как правильно вызвать данный метод из html разметки?
Пробовал так
<span>{{getAddressByCode(addressCode)}}</span>
в результате на странице
[object Promise]
Пробовал и так

<span>{{async getAddressByCode(addressCode)}}</span>

Это вызывает ошибку парсинга Parser Error: Unexpected token 'getAdressByCode'

Вообще, существует ли возможность в ангуляре вызывать нормальные async методы, а не только RxJs?

Answer 1

[Антон Швец]

<span>{{ getAddressByCode(addressCode) | async }}</span>

AsyncPipe умеет раскрывать промисы.
Разумеется метод будет вызываться каждый раз при проверке изменений.

существует ли возможность в ангуляре вызывать нормальные async методы, а не только RxJs?

Angular это все еще js и работать с асинками в нем можно. Но как правило не нужно потому, что создаются совершенно лишние обертки, rx просто удобнее.
Для реквестов используется xhr, и его событийная природа легко конвертируется в rx поток.

Comments

[eRKa]

Возможно в каких то случаях это сработает, но в моем - нет.
После добавления такого кода получаю в цикле ошибку

ERROR Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []

Я так предполагаю, что из-за того, что ангуляр выполняет этот метод в своем цикле и каждый раз получает разные объекты.
({})==({}) // false
Значит, такой способ помещения метода запроса в разметку, плохая идея.
Пришлось слегка переписать логику.

Но как правило не нужно потому, что создаются совершенно лишние обертки, rx просто удобнее.

То, что я вижу в коде касаемо запросов, как выглядят запросы чуть сложнее одиночного, у меня вызывает жуткий дискомфорт и ощущение, что что-то не так. То, от чего пытаются давно уйти в js, используя jq-ий ajax, где все на колбеках и кучи трудночитаемых вложений друг в друга.

Вот кусок реального легаси кода, причем не самого навороченного.

код

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('Документ сформирован');
            })
          );
        }),
        catchError(err => {
          this.notifyService.error('Ошибка формирования документа!');
          console.log(err);
          return of(err);
        })
      );
  }

Понять здесь что-то сходу нереально, приходится какое-то время поломать глаза. Я могу предположить, что возможно, он просто написан не лучшим образом, но если бы он писался по концепции async/await, сделать его настолько нечитаемым было бы гораздо проблематичней.

Как по мне, то код на async/await выглядит чище и читаемей.

PS: Если судить о постановке моего вопроса, Ваш ответ должен быть верным и хоть он не подходит в моем случае, отмечу ответ как решение.

[Антон Швец]

eRKa,

После добавления такого кода получаю в цикле ошибку

Это сообщение из AngularJS. А там все по другому

такой способ помещения метода запроса в разметку, плохая идея

верно.
Есть техники выполнения запросов прямо из разметки, но надо понимать что делаешь. И при этом я не вижу в них смысла: профита нет, гибкости нет.

Вот кусок реального легаси кода, причем не самого навороченного

Нормальный код, но должен быть отформатирован получше, типизирован и разбит на несколько методов, почищен от лишних переменных.
combineLatest тут не нужен, вложенный pipe тоже.
На асинках будет не короче и не чище, практически так же будет написано потому что тут очень простая цепочка. А вот в сложных случаях на асинках будет или невозможно сделать (придется делать события) или заморочено.
switchMap, map, tap являются метками в коде, помогающими быстро понимать какую функцию несут эти фрагменты.