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

我希望在console.log中显示的这个确切输出显示在我的HTML中，由于某些原因我无法做到，请帮助我，我已准备好一切，只需要一种方法来渲染它我的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>

在视图html中渲染ionic3数据

1 个答案: