В чем разница между valueChanges и snapshotChanges ()

Question

это мой компонент. html

<div class="form-group">
        <label for="category">Category</label>
        <select ngModel name="category" id="category" class="form-control">
            <option value=""></option>
            <option *ngFor="let c of categories$ | async" [value]="c.key$">
                {{ c.name }}
            </option>    
        </select>
     </div>

Это мой Component.ts

categories$: Observable<any[]>;

  constructor(categoryService: CategoryService) { 
    this.categories$ = categoryService.getCategories();
  }


  save(product){
    console.log(product);
  }

Это мой category.service.ts Я использовал оба valueChanges () и snapShotChanges (). При использовании valueChanges я могу получить доступ к c .name, но не могу c .key И с помощью snapshotChanges () я могу получить доступ к c .key, но не могу получить доступ к c .name

getCategories(){
    //return this.db.list('/categories/').valueChanges();
    return this.db.list('/categories').snapshotChanges();`
  }

Мне нужно для одновременного доступа к c .name и c .key $ Нужно решение для этого

Answer 1

valueChanges():

Используйте его, когда вам просто нужны данные объекта. Метаданные документа не прикреплены, что упрощает рендеринг в представление.

snapshotChanges():

Когда вам нужны данные документа, но вы также хотите хранить метаданные , Эти метаданные предоставляют вам базовый документ DocumentReference и идентификатор документа. Наличие идентификатора документа облегчает использование методов манипулирования данными. Этот метод дает вам больше возможностей с другими Angular интеграциями, такими как ngrx, формы и анимации, благодаря свойству type. Свойство type для каждого DocumentChangeAction полезно для редукторов ngrx, состояний форм и состояний анимации.

В основном snapshotChanges() даст вам доступ к идентификатору документа по сравнению с valueChanges()

https://github.com/angular/angularfire/blob/master/docs/firestore/documents.md

Answer 2

Добавив .pipe(tap(categories => console.log(categories)); к .snapshotChanges(), вы получите хорошее представление о том, как выглядят данные, с которыми вы работаете. Это коллекция объектов, которые выглядят следующим образом:

0: {
  payload: DataSnapshot,
  type: "value",
  prevKey: null,
  key: "frock"
},
1: {
  payload: DataSnapshot,
  type: "value",
  prevKey: "frock",
  key: "saree"
},

Как видите, в ваших данных нет свойства name, поэтому вы не можете его использовать. Вместо этого вы должны использовать одно из других значений, предоставляемых данными, таких как key или prevKey.

С другой стороны, я не думаю, что это хорошая идея для используйте snapshotChanges для сопоставления данных с выпадающим списком. Я уверен, что в Firestore есть лучшие способы получения значений.