Ionic 3 - Fetching array of data from Firebase then set it to input


#1

I am trying to fetch data from my firebase database and I want to set it to my input on my app. The app is basically an attendance app where there is a list of students then the user can check if they’re absent or present or whatever.

This is the firebase structure…

enter image description here

this is what the page looks like…

enter image description here

The current code on my app…

HTML

  <ion-list>
    <ion-list-header>
      Students
    </ion-list-header>
      <ion-item *ngFor="let student of attendance">
        <ion-input [(ngModel)]="student.studentName" type="text" disabled="true"></ion-input>
        <ion-select item-end [(ngModel)]="student.status">
          <ion-option value="Present">Present</ion-option>
          <ion-option value="Absent">Absent</ion-option>
        </ion-select>
      </ion-item>
  </ion-list>

  <button ion-button block clear (click)="addAttendance(student)"> Check!
</button>

TS

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { StudentListService } from '../../services/students-list/students-list.service';
import { AttendanceListService } from '../../services/attendance/attendance.service';
import { Student } from '../../models/students/students.model';
import { Attendance } from '../../models/attendance/attendance.model';
import { AngularFireDatabase } from 'angularfire2/database';
import firebase from "firebase";

@IonicPage()
@Component({
  selector: 'page-check-attendance',
  templateUrl: 'check-attendance.html',
})

export class CheckAttendancePage {

  public attendance: any[] = [
    {
    studentName: 'name1',
    status: '',
    },
    {
    studentName: 'name2',
    status: '',
    },
  ]

  public student: any[]

  constructor(private studentsList: StudentListService, private attendanceList: AttendanceListService, public navCtrl: NavController, public navParams: NavParams) {
    this.student = this.attendance
  }

  addAttendance(student){
    console.log(student)
  }

}

As you can see I set the value of the attendance on the TS file, how can I set the value of the attendance.studentName to the value of the studentName from the firebase database?

THANKS