Question

使用Firebase和Angular，我可以记录查询结果，但是我无法在HTML中显示结果。

HTML：

<ion-content padding>
  <ion-label class="signinlabel">Chat</ion-label>
  <input type="text" placeholder="What is your message?" (keyup.enter)="Send($event.target.value)">
  <div>
    <p *ngFor="let item of items">{{item.message}}</p>
  </div>
</ion-content>

查询的TS：

  ionViewDidLoad(){
    firebase.auth().onAuthStateChanged((user)=> {
      this.user = user;
      console.log('authState',user);
      if (user) {
        // User is signed in.
        var uid = user.uid;
        // ...
        firebase.database().ref('/userprofile/' + uid + '/' + 'list').once('value').then((snapshot)=> {
          var listkey = (snapshot.val());
          console.log("ionViewDidLoad listkey",listkey)
          this.listKey = listkey;
          this.getChat(listkey)
                    .subscribe(items => {console.log("chat messages", items); this.item = items});
        });
      }
      else {
        this.navCtrl.setRoot(SignInPage);
        // User is signed out.
      }
    });
  }

  getChat(listkey): FirebaseListObservable<any> {
    console.log('CHAT.db.list','userlists/' + listkey + '/chat');
    return this.af.list('userlists/' + listkey + '/chat', {
      query: {
        limitToLast: 50,
      }
    });
  }

我的数据库结构是：

{
  "-L0MCOODnFTshrVCJiZN" : {
    "chat" : {
      "-L1z-K-0JC2GMxx4rwmz" : {
        "message" : "test1"
      },
      "-L1z-KkxxPAVr-_ptDJ6" : {
        "message" : "test2"
      },
      "-L1z-LILho3sszvU0zfR" : {
        "message" : "test3"
      }
    }
  }
}

我正在正确记录chat messages和CHAT.db.list，但我仍然无法将消息输出到{{item.message}}。为什么我无法使用它？

Answer 1

您正在使用模板中的项目并分配到组件内的项目，将其更改为 items

.subscribe(items => {console.log("chat messages", items); this.items = items});

正在记录Firebase查询结果，但未在HTML中显示

1 个答案: