ionic4--数据显示

今天小编带领大家做一次数据显示，今天以循环显示数据库和显示变量数据，主要针对于新手练习操作哦。

循环显示

1. 首先我们需要在html也中写入此段代码，用于显示，我们接下里

// let item 表示是自定义一个变量item， of datas表示从datas里面显示数值。
    <ion-item detail *ngFor="let item of datas">
        <ion-label> {{item.createTime}}</ion-label>  
    </ion-item>

2. 接着我们需要在ts文件中进行下面的操作

   datas = [];  // 声明数组，在export方法下面的空白处写即可，不要写进这个方法里面。

// 建立一个查询的方法，我们将数据存入到datas里面。
  selectHistory() {
    this.storage.get('userId').then((val) => {
      const url = 'exam-web/signIn/queryHistorySingin/' + val + '/' + teachClassId ;  // 这是接口，里面需要个参数和自定义的参数
      this.http.post(url).subscribe(
        res => {
          if (res.json().code === '0000') {  // 四个0 代表成功
            for (let i = 0; i < this.datas.length; i++) { 
            	this.datas.push(res.json().data[i]);            
            }
          }
        });
    });
  }

3. 如果我们需要一个下拉框的情况下，我们在1里面代码上面写上此代码：

<ion-content padding>
  <ion-card >
    <ion-item (click)="isHide()">
      <ion-label>班级1</ion-label>
      
	// 此ion-icon为下拉菜单
      <ion-icon slot="end" name="ios-arrow-down" *ngIf="Hide =='hideOK'"></ion-icon>
      <ion-icon slot="end" name="ios-arrow-forward" *ngIf="Hide !='hideOK'"></ion-icon>
    </ion-item>


    <ion-list  *ngIf="Hide=='hideOK'">  // ngIf 表示根据hide来显示内容
      <ion-item >
        <ion-label >
          暂无人员
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-card>

	然后在ts里面存入:

  isHide() {
    if (this.Hide !== 'hideOK') {
      this.Hide = 'hideOK';
    } else {
      this.Hide = 'hideCancel';
    }
  }

备注

let表示设定的变量是可以变化的：比如a=1,a=2,a=3,依次执行下来a=3

const表示设定的变量不能变： 比如： a=1, 之后a只能等于1，不再变化。