在 html ionic 中显示特定数据答案

【问题标题】：Displaying a specific data in html ionic在 html ionic 中显示特定数据
【发布时间】：2023-04-08 23:00:01
【问题描述】：

我正在尝试使用 firebase 中的用户 uid 显示特定的用户名，但我无法在 html 中显示它。我尝试通过 Uid 从 userColl 获取用户名。对于html，我尝试使用*ngFor，但是有问题表明它只能用于数组

代码如下：

read_Username() {
    return this.firestore.collection('userColl',ref => ref
    .where('userUid', '==', this.userUid)).snapshotChanges();
    //return this.firestore.collection('/userColl/userUid' + this.userUid).snapshotChanges();
  }
  ngOnInit() {
     this.user = firebase.auth().currentUser;
     //this.userUid = firebase.auth().currentUser.uid
     this.read_Username().subscribe(data => {

      this.user = data.map(e => {
        if(this.user != null){
           return {
          id: e.payload.doc.id,
          userUid: e.payload.doc.data()['userUid'],
          username: e.payload.doc.data()['username'],
        };
        }

      })
      console.log(this.user);

    });

    }

html:

 <ion-card class="welcome-card">
<img src="/assets/shapes.svg" alt=""/>
<div>
<ion-card-header >
  <ion-card-subtitle></ion-card-subtitle>
  <ion-card-title> {{userUid}}</ion-card-title>
</ion-card-header>
<ion-card-content>
  <p>{{username?.username}}</p>
</ion-card-content>

【问题讨论】：

你是说你的 {{userUid}} 没有正确显示对吧？是这个意思吗？
其实既是userUid又是用户名
您可能需要将您的 userUid 和用户名初始化为一个变量（正如我在下面的答案中所说的 - userUid:string 和 username:string）。然后使用“this.”设置这些变量。然后它应该能够显示在您的html页面上。

标签： ionic4

【解决方案1】：

尝试将您的代码更改为：

read_Username() {
    return this.firestore.collection('userColl',ref => ref
    .where('userUid', '==', this.userUid)).snapshotChanges();
    //return this.firestore.collection('/userColl/userUid' + this.userUid).snapshotChanges();
  }

  userUid:string;
  username:string;
  ngOnInit() {
     this.user = firebase.auth().currentUser;
     //this.userUid = firebase.auth().currentUser.uid
     this.read_Username().subscribe(data => {

      this.user = data.map(e => {
        if(this.user != null){
           return {
          id: e.payload.doc.id,
          userUid: e.payload.doc.data().userUid,
          username: e.payload.doc.data().username,
        };
        }

      })
      console.log(this.user);

    });

    }

html:

 <ion-card class="welcome-card">
<img src="/assets/shapes.svg" alt=""/>
<div>
<ion-card-header >
  <ion-card-subtitle></ion-card-subtitle>
  <ion-card-title>{{userUid}}</ion-card-title>
</ion-card-header>
<ion-card-content>
  <p>{{username}}</p>
</ion-card-content>

如果不行就换

userUid: e.payload.doc.data().userUid,
username: e.payload.doc.data().username,

到：

userUid: e.payload.doc.data()['userUid'],
username: e.payload.doc.data()['username'],

【讨论】：