Используйте функцию Promise в Angular 6 Data Binding

Question

У меня проблема с использованием асинхронной функции в привязке данных Angular 6:

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)}}
</span>

getAssignedUser() - это асинхронная функция, которая извлекает документ из Firestore, и я хочу отобразить имя назначенного пользователя, которое я получил из Firestore. Единственная проблема здесь в том, что я не могу отобразить значение имени OnInit Если я вставлю кнопку и добавлю событие щелчка, отобразится имя.

Компонент:

async getAssignedUser(id): Promise<string> {
    if (id != null) {
        return this._usersService
        .getUserById(id)
        .then(data => {
            this.assignedUser = data.user_fname;
            return this.assignedUser;
        })
    } else {
        return null;
    }
}

Услуги:

getUserById(id): any {
    let user: any;
    user = this.afs.collection('agents').doc(id).ref.get().then(function (doc) {
        if (doc.exists) {
            user = doc.data();
            console.log(user);
            return user;
        }
        else {
            console.log('No such document');
        }
    }).catch(function (error) {
        console.log('Error getting document: ', error);
    })
    return user;
}

Любая помощь, пожалуйста?

Answer 1

Согласен с @Sunil Singh Above Answer, небольшая поправка в файле шаблона. Асинхронный оператор в основном используется для наблюдаемых. Вы можете позвонить без этого он должен работать.

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)}}
</span>

Answer 2

Issue

Проблема с выполнением вызова getAssignedUser из html и ожиданием возврата значения.Это не будет гарантией, потому что getAssignedUser выполняет асинхронную операцию.Вы упомянули асинхронную операцию на getAssignedUser, однако не возвращает никаких Observable или Promise.

Решение

Необходимо изменить как службы, так и компоненты.Функция должна вернуть Обещание для обработки этого случая.

Сервис:

  getUserById(id): any {

    return new Promise((resolve, reject) => {

      this.afs.collection('agents').doc(id).ref.get().then(function (doc) {
        if (doc.exists) {
          user = doc.data();
          console.log(user);
          resolve(user);
        }
        else {
          resolve(null); //<-- you can reject if you want.
        }
      }
    }
  }

Компонент:

async getAssignedUser(id): Promise<string> {
        return this._usersService
        .getUserById(id);
}

html

<span *ngIf="application.status == 'in-progress'; else new">
  {{getAssignedUser(application.user_id)} | async}
</span>

Важно: Вы не должны работать в html, это может привести к многократному вызову и повлиять на производительность.Лучше было бы вместо этого использовать функцию.

Примечание: код записывается непосредственно в редактор stackoverflow, поэтому возможна опечатка или синтаксическая ошибка.Поэтому, пожалуйста, исправьте себя.