Verwenden Sie Versprechen-Funktion im Winkel 6 Data Binding

Ich habe ein Problem wo ich bin mit einem async-Funktion im Winkel 6 data binding:

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

Den getAssignedUser() ist eine asynchrone Funktion, die holt ein Dokument aus Firestore und ich möchte die Anzeige des zugewiesenen Benutzers Vorname, erhielt ich von Firestore. Das einzige problem hier ist, dass ich nicht anzeigen kann, den Wert für firstname OnInit. Wenn ich eine Schaltfläche einfügen und hinzufügen eine click-Ereignis, es wird der name angezeigt.

Komponente:

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

Service:

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

Jede Hilfe bitte?

  • Können Sie mit uns einen stackblitz her Ihrem Beispiel, um deutlicher zu sein ?
  • Was ist es, das Sie versuchen zu anzeigen? Du tust {{getAssignedUser(application.user_id)}}, aber getAssignedUser gibt ein Versprechen. Man könnte eine async Rohr, wie {{getAssignedUser(application.user_id) | async }}
  • Ich versuche, die Anzeige einer Zeichenkette tatsächlich. Ich weiß nicht, wie man den string-Wert aus dem Versprechen. Es funktioniert mit einem click-Ereignis. Noch genauer, ich bin tatsächlich mit einer id, die zum abrufen von Daten aus einem anderen Firestore-Dokument und wollen Zugriff auf die Dokument-Werte.
  • Sie können versuchen, mit den async Rohr, um den Wert aus, der wäre {{getAssignedUser(application.user_id) | async }}
  • Ich habe versucht, es funktioniert nicht. Eigentlich mein browser friert, als wenn ich bin stecken in einer unendlichen Schleife. Die Funktion staendig und nie aufhören.
  • Dass;s eine der Schattenseiten der Aufruf von Funktionen innerhalb der Vorlage: die Funktion wird aufgerufen, für jedes change-detection-Zyklus. Stattdessen, warum nicht aufgerufen getUserById im ngOnInit, und nutzen Sie einfach {{assignedUser}} im template?
  • Ich pass ein argument, id. Und die case-Szenario ist, ich habe eine Tabelle mit mehreren Anwendungen. Ich habe ein Feld Zugeordnet, welches anzeigt, der Benutzer zugewiesen ist die Anwendung. In Firestore habe ich 2 Kollektionen, eine für Anwendungen und andere Benutzer. Anwendungen enthalten eine user_id, die Links auf der Users-Auflistung, um die zugewiesenen Benutzer. Ich weiß wirklich nicht, wie Sie es in ngOnInit.

InformationsquelleAutor sleepz | 2018-11-10



2 Replies
  1. 0

    Problem

    Problem mit call getAssignedUser aus der html-und der Erwartung, um den Rückgabewert. Dies wird nicht garantieren, weil getAssignedUser führt asynchronen Betrieb. Sie hatten erwähnt der asynchrone Betrieb auf getAssignedUser jedoch nicht zurückgegeben Observable oder Promise.

    Lösung

    Müssen Sie ändern, in beide Dienste und Komponenten. Funktion zurückgeben sollte, die Versprechen, in diesem Fall behandeln.

    Service:

      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.
            }
          }
        }
      }

    Komponente:

    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>

    Wichtig : Sie sollten nicht die Funktion in html, es kann zu mehrfachen Anruf und wird Auswirkungen auf die Leistung. Besser wäre die Verwendung der Funktion statt.

    Hinweis : code, der geschrieben wird direkt auf die stackoverflow-editor, so könnte es sein, Tippfehler oder syntaktische Fehler. Also bitte korrigieren Sie sich selbst.

    • async ist nur zu beobachten, nicht für Versprechungen.
    • Ich habe versucht, und es funktioniert nicht :/
    • bitte erstellen Sie stackblitz demo, um es zu beheben, schneller und einfacher Weg.
  2. 0

    Stimme mit @Sunil Singh Obige Antwort, kleine Korrektur in der Vorlage-Datei. async-operator wird hauptsächlich für die beobachtbaren. Sie aufrufen können, ohne, dass es funktionieren sollte.

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.