Firebase - Firestore - Angularfire2 - Angular：如何访问控制器中的键值？答案

【问题标题】：Firebase - Firestore - Angularfire2 - Angular : How do I access key values within the controller?Firebase - Firestore - Angularfire2 - Angular：如何访问控制器中的键值？
【发布时间】：2018-07-15 05:05:52
【问题描述】：

我想在集合查询后将来自 firestore 数据库键值的字符串转换为 Angular 控制器中的 javascript 日期。我可以通过模板访问值，但我不确定如何通过控制器访问值，因此我可以将字符串分配给变量并将它们转换为日期。这是我的代码

export interface Item {
  url: string;
  order: string;
  year: string;
  month: string;
  day: string;
  hour: string;
}

...

export class ItemComponent implements OnInit {
  private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<Item>('items', ref => {
      return ref.orderBy('order', 'desc').limit(1);
    });
    this.items = this.itemsCollection.valueChanges();
  }
}

【问题讨论】：

@PC 你能控制台this.items的值吗

标签： angular firebase google-cloud-firestore angularfire2

【解决方案1】：

Items 是一个可观察对象，您可以根据需要使用内置运算符对其进行操作，在这种情况下将值映射到其他对象。

this.itemsCollection.valueChanges().pipe(
    map(items => items.map(stringToDateItem))
)

const stringToDateItem = (item: Item) => ({...item, date: new Date(item.year, item.month, item.day)});

在这种情况下，我们使用了两次 map，因为第一次是 observable 上的 map，说明我们想要在获取值时更改它们。由于一个值是由一个数组表示的，因此我们使用 map from array 将每个单独的值更改为我们需要的值。

上面我已经为项目添加了一个新的 date 属性，因此您必须在界面中处理它。

【讨论】：