Die berechneten Eigenschaften von Ember.js warten nicht auf asynchrone RSVP-Versprechen

Question

Ich habe eine Ember.js-Komponente und versuche, eine berechnete Eigenschaft zu verwenden, um deren Sichtbarkeit basierend auf den Ergebnissen eines asynchronen RSVP-Versprechens zu bestimmen. Allerdings scheint die berechnete Eigenschaft nicht auf die Auflösung des Versprechens zu warten, was dazu führt, dass das count-Objekt undefiniert ist.

Hier ist ein Auszug meines Komponentencodes:

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Component.extend({
    classNames: ['count'],
    countService: service('count'),

    getCount: computed(function () {
        debugger;
        RSVP.all([
            this.get('countService').getCount()
        ]).then(([count]) => {
            return Number(count);
        });
    }),

    isVisible: computed('getCount', function () {
        debugger;
        let count = this.get('getCount');
        return count !== undefined && count > 0;
    }),
});

Wie Sie sehen können, ruft die berechnete Eigenschaft getCount die countService-Methode getCount() für den injizierten Dienst auf. Diese Methode gibt ein Versprechen zurück, das mit einem Zählwert gelöst wurde.

In der berechneten Eigenschaft isVisible versuche ich, auf den count-Wert zuzugreifen, der von der berechneten Eigenschaft getCount zurückgegeben wird. Wenn ich jedoch während des Debuggens den Wert von count protokolliere, wird er als undefiniert angezeigt, obwohl das Versprechen zu diesem Zeitpunkt bereits gelöst sein sollte.

Ich bin mir nicht sicher, warum berechnete Eigenschaften nicht auf die Auflösung des Versprechens warten, bevor sie versuchen, auf den Wert zuzugreifen. Fehlt mir etwas in meiner Implementierung? Gibt es eine bessere Möglichkeit, asynchrone Abhängigkeiten in den berechneten Eigenschaften von Ember.js zu verarbeiten?

Jede Hilfe oder Einsicht wäre sehr dankbar!

Answer 1

请您尝试一次吗？我还没有测试过，但希望这是有道理的。

import Component from '@ember/component';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';
import RSVP from 'rsvp';

export default Component.extend({
  classNames: ['count'],
  countService: service('count'),

  getCount: computed(function() {
    return RSVP.all([this.get('countService').getCount()]).then(([count]) => {
      return Number(count);
    });
  }),

  isVisible: computed('getCount', function() {
    let count = this.get('getCount');
    return count !== undefined && count > 0;
  }),
});