在视图 html 中呈现 ionic3 数据

Posted 2023-03-13

【中文标题】在视图 html 中呈现 ionic3 数据

【英文标题】：rendering ionic3 data in view html

【发布时间】：2018-04-25 01:47:14

【问题描述】：

**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 新手。

【问题讨论】：

您需要在html上显示哪些数据列表？

console.log(displayName + " : " + itemList);所以需要显示名称和itemList

【参考方案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>

【讨论】：

工作:) 非常感谢

我发现的一个问题是，您已将 JS 代码放入 ionViewDidEnter() 中。问题是，每当我切换选项卡时，它都会再次调用，因此数据会一次又一次地呈现。有什么办法改吗？

您可以更改事件。使用ionViewDidLoad()。