嵌套循环JSON数组离子3

Posted 2021-03-30

我有一个显示数据的问题，目前我的观点就像this。

表'jadual'中的数据库就像这样橙色框是来自pelajar_id列的名称，下面的时间是来自jadual_scan列的时间戳。我的预期观点是这样的。

-------------------------------
Wafi Dania                     |
-------------------------------
scan       |   08:12:13        |
           |   03:35:28        |
--------------------------------

--------------------------------
Assi                            |
--------------------------------
Scan       |   11:24:18         |
--------------------------------

你可以在.html中引用我的源代码

<ion-label>
        Date: {{myDate}}
    </ion-label>
  <ion-list *ngFor="let item of data">
      <ion-item color="primary">
          <ion-label><h2>{{item.pelajar_nama}}</h2></ion-label>
      </ion-item>
      <ion-grid>
          <ion-row color=primary>
            <ion-col>
              Scan
            </ion-col>
              <ion-col>
               {{ item.jadual_scan  | date: 'hh:mm:ss' }}
              </ion-col>
            </ion-row>
        </ion-grid>
  </ion-list>

和我的.ts文件

getAttendance(){
        this.restProvider.getAttendance().then(data=>{
        this.data=data;
       // for(let i=0; i<this.data.length; ++i){
          //this.myArray.push({'displayName': this.data[i].pelajar_nama});
         // for(let j=0; j<this.myArray[i].length; ++j){
          //  this.inside.push({"displayInside": this.myArray[j].jadual_scan})
          //}
          //for (let j=0; j<this.data[i].pelajar_nama[j].length; ++j){
           //this.myArray[i].inside[j].push({'displayName':this.data[i].pelajar_nama[j].jadual_scan});
          //}
       // }
                console.log(this.data);
            });
  }

这是从API获取数据

$parentId  = Auth::guard('api')->user()->id;
        $student = DB::table('pelajar')
                ->join ('jadual','jadual.pelajar_id','pelajar.pelajar_id')
                ->select('pelajar.*','jadual.*')
                ->whereDate('jadual.jadual_scan', DB::raw('CURDATE()'))
                ->where('pelajar.penjaga_id',$parentId)
                ->orderBy('pelajar.pelajar_id','asc')
                ->get();
        return $student;

答案

<ion-list *ngFor="let item of data"> 
  <ion-item color="primary">
   <ion-label> 
 <h2>{{item.pelajar_nama}}</h2> 
 </ion-label>  
</ion-item> 
<ion-grid>
<ion-row color=primary>
  <ion-col>
    Scan
  </ion-col>
  <ion-col *ngFor="let date of item.dates">
    {{ date.jadual_scan | date: 'hh:mm:ss' }}
  </ion-col>
</ion-row>

你忘了迭代循环日期显示