как получить одно значение из firebase, используя angularfire2 и angular5?

Я пытаюсь получить и отобразить одно значение из firebase.

Моя структура firebase выглядит следующим образом: введите здесь описание изображения

Мой текущий файл .ts выглядит так:

storestat$: Observable<any[]>;

constructor(afDb: AngularFireDatabase) {
     this.storestat$ = afDb.list<any>('MyShop').snapshotChanges();
}

Я хочу отобразить значение storeStatus в html, используя привязку {{}}. Что-то вроде следующего:

<button>{{ storeStatus }} Status</button>

Сначала я пытался использовать следующее:

<ng-container *ngFor="let s of storestat$ | async">...
<button>{{ s.storeStatus }}</button>

но, конечно, это не сработает.

Я пытался искать ответы, но они просто не казались мне достаточно актуальными, поскольку все они указывали на получение нескольких конкретных значений из списков.

Я использую angularfire2 и angular5.

Я новичок в angular5, поэтому буду признателен за любую помощь, включая любые образовательные указатели.


firebase angular firebase-realtime-database angularfire2 angular5
person Asim    schedule 19.11.2017    source источник
comment
для отладки попробуйте <p>{{ s | json }}</p> и проверьте, приходят ли данные?   -  person Hareesh    schedule 19.11.2017
comment
Я получаю следующую ошибку: AppComponent.html:4 ERROR TypeError: Преобразование циклической структуры в JSON в JSON.stringify (‹anonymous›) в JsonPipe.transform (common.js:5954) в Object.eval [как updateDirectives] (AppComponent. html:4) в Object.debugUpdateDirectives [как updateDirectives] (core.js:14339) в checkAndUpdateView (core.js:13508) в callViewAction (core.js:13858) в execComponentViewsAction (core.js:13790)...   -  person Asim    schedule 19.11.2017
comment
попробуйте методом .valueChanges().   -  person Hareesh    schedule 19.11.2017
comment
это также дает ту же ошибку. У меня есть решение, опубликованное ниже, но я думаю, что оно немного грязное.   -  person Asim    schedule 19.11.2017

Ответы (2)


arrow_upward
0
arrow_downward

У меня есть обходной путь, но я не уверен, что это лучшее решение. моя новая соответствующая часть файла .ts выглядит так:

    this.storestat$ = afDb.list<any>('myshop').snapshotChanges()
       .map(
            changes => {
               return changes.map(
                  c => ({ val: c.payload.val(), 
                          key: c.payload.key,
                          ...c.payload.val()
                   })
               );
       });

и моя соответствующая часть .html теперь выглядит так:

<ng-container *ngFor="let s of storestat$ | async">

  <button *ngIf="s.key == 'storeStatus'">{{ s.val }} Status</button>

</ng-container>

Я не думаю, что это самое чистое решение, поскольку вызов базы данных также отображает нежелательную ветвь Current Orders, но оно работает.

person Asim    schedule 19.11.2017

arrow_upward
0
arrow_downward

Если вас не волнуют клавиши нажатия, вы можете использовать .valueChanges(), и это должно работать так

afDb.list<any>('myshop').valueChanges().subscribe(value => 
{
    this.storestat$ = value;
});

и в хтмл

<ng-container *ngFor="let s of storestat$">

  <button>{{ s.storeStatus }} Status</button>

</ng-container>
person Hareesh    schedule 19.11.2017
comment
Я думал, что это сработает, но это не так. По какой-то причине значение storeStatus не передается должным образом. Вот почему мне пришлось явно отображать значения в моем решении ниже. - person Asim; 19.11.2017
comment
можете ли вы показать полную структуру myshop. только часть показана на вашем изображении - person Hareesh; 19.11.2017
comment
Я изменил свой исходный пост, чтобы показать полную структуру myshop. - person Asim; 19.11.2017
comment
storeStatus младше CurrentOrders? - person Hareesh; 19.11.2017
comment
я не уверен, почему он не работает. я изменил свой ответ с подпиской. попробуйте это без асинхронного канала. - person Hareesh; 20.11.2017
comment
storeStatus находится за пределами CurrentOrders. - person Asim; 20.11.2017
comment
Я получаю сообщение об ошибке AppComponent.html:4 ERROR Error: Не удается найти другой вспомогательный объект «[object Object]» типа «object». Однако, если я использую {{ s }} и позволяю ему печатать каждый цикл, тогда он печатает значение, которое мне нужно, но также включает [object Object], который является ветвью Current Orders - person Asim; 20.11.2017
comment
может быть у *ngFor проблемы с объектами попробуйте разобрать this.storestat$ = JSON.parse(value) - person Hareesh; 20.11.2017