Попытка получить доступ к одному документу из Firestore в Typescript и передать его в HTML

Question

Я пытаюсь получить доступ к одному документу в моем Firestore (тот, у которого есть сообщение "b"). Я могу найти правильный документ и распечатать его в журнале консоли, но когда я пытаюсь присвоить его общедоступной переменной, которая будет доступна в HTML как значения по умолчанию для таблицы, консоль сообщает мне, что переменная не определена и или что он не может быть установлен на содержимое doc.data ().

Я пытался использовать функцию where (), а также mergemap (), но я получаю ошибки в своем редакторе кода (для mergemap - Свойство 'mergeMap' не существует для типа 'Observable <{}> «). Я также пытался перебирать элементы (которые содержат все документы, и я ЕСМЬ могу получить доступ в своем HTML), но я не могу найти способ получить длину Observable. Я также попытался изменить тип defaultdoc безрезультатно.

Вот что у меня есть

  public defaultdoc: Array<any>;
  public items: Observable<any[]>;
  constructor(private data: DataService, private fb: FormBuilder, private afs: AngularFirestore) {

   }

  ngOnInit() {
    this.myForm = this.fb.group({
      title: ['', Validators.required],
      message:['', Validators.required]
    })
    //this.myForm.valueChanges.subscribe(console.log);
    let inputString = "b";
    const collection: AngularFirestoreCollection<Item> = this.afs.collection('postreply');
    this.items = this.afs.collection('postreply').valueChanges();
    this.afs.collection("postreply").get().toPromise().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          //console.log(doc.id, " => ", doc.data());
          console.log(doc.data().message)
          if(doc.data().message == inputString){
            this.defaultdoc.push(doc.data());
            console.log(this.defaultdoc)
          }

      });
  });

    console.log(this.defaultdoc)
  }

Вот HTML

<td><input type="text" class="form-control" formControlName = message value = {{defaultdoc.message}}/></td>
<td><input type="text" class="form-control" formControlName = title value = {{defaultdoc.title}}/></td>

Значения по умолчанию должны отображаться в двух строках таблицы, созданных в HTML.

Answer 1

Я думаю, что ваше "this" не указывает на переменную, которую вы используете в HTML.Попробуйте использовать себя, как это:

    public defaultdoc: Array<any>;
  public items: Observable<any[]>;
  constructor(private data: DataService, private fb: FormBuilder, private afs: AngularFirestore) {

   }

  ngOnInit() {
    this.myForm = this.fb.group({
      title: ['', Validators.required],
      message:['', Validators.required]
    })
    //this.myForm.valueChanges.subscribe(console.log);
    let inputString = "b";
    const collection: AngularFirestoreCollection<Item> = this.afs.collection('postreply');
    this.items = this.afs.collection('postreply').valueChanges();
    let self = this;
    this.afs.collection("postreply").get().toPromise().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          //console.log(doc.id, " => ", doc.data());
          console.log(doc.data().message)
          if(doc.data().message == inputString){
            self.defaultdoc.push(doc.data());
            console.log(self.defaultdoc)
          }

      });
  });

    console.log(this.defaultdoc)
  }

Надеюсь, что это работает!