在视图 html 中呈现 ionic3 数据

Question

**post.html**
<ion-content padding>
  <ion-card>
    <ion-card-content>
       *//Something to do here*
    </ion-card-content>
  </ion-card>
</ion-content>




**post.ts**
export class PostPage {
  items:any;
  displayName: string;

  firedata = firebase.database().ref('/chatusers');

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage,
              public userservice: UserProvider, public afireauth: AngularFireAuth) {

    this.userservice.getAllPosts().on('value', (snapshot) => {
      let posts = snapshot.val();
      let keys = Object.keys(posts);
      for (let i = 0; i < keys.length; i++) {
        let k = keys[i];
        let postArray = posts[k].post;
        let displayName = posts[k].displayName;

        for (let j = 0; j < postArray.length; j++) {
          let itemList = postArray[j];
          console.log(displayName + " : " + itemList);
        }
      }
    });
  }


**console.log output**
TANMAY : PDP
TANMAY : ALGO TA
TANMAY : smoking kills
SIDDHANT : Bad Grades
SIDDHANT : boytown
SIDDHANT : smoothy

我希望在我的 HTML 中显示在 console.log 中显示的确切输出，由于某种原因我无法做到，请帮助我，我已经准备好一切，只需要一种方法来呈现它我的 HTML。 Ionic3 新手。

Answer 1

你可以简单地如下图所示。

注意：稍后您可以将其转换为类型化数组，而不是any（即myArray:any=[]）。

根据您的用例选择lifecycle event。我选择了ionViewDidLoad。

ts

myArray:any=[];

constructor(){}

 ionViewDidLoad(){    
   this.userservice.getAllPosts().on('value', (Gotdata) => {
      let posts = Gotdata.val();
      let keys = Object.keys(posts);
      for (let i = 0; i < keys.length; i++) {
        let k = keys[i];
        let postObj = posts[k].post;
        let displayName = posts[k].displayName;

        for (let j = 0; j < postObj.length; j++) {
          let itemList = postObj[j];
          let arrayObj={displayName :displayName ,item:itemList }
          this.myArray.push(arrayObj);//array
        }
      }
    });
}

.html

<ion-content padding>
  <ion-card>
     <ion-list>
       <ion-item *ngFor="let m of myArray" >
       <ion-label>{{m.displayName}}</ion-label>
       <ion-label>{{m.item }}</ion-label>
       </ion-item>
     </ion-list>
  </ion-card>
</ion-content>