Ionic 3 Firebase push array

I am building an attendance app and I am having a hard time pushing an array of data.

I initially fetched all the students from the firebase realtime database and used ngFor to loop all the students and then i used ion-select for the status of the student(present, absent, or late).


  1. When I set the status of a student, for example late, all the students will be marked as late.
  2. When I hit save, only one student will be pushed to the database

I am sure it is because of the ngFor or whatever. I am completely new to Ionic. please help.

the page looks like this…

Screenshot of the page

My code looks like this…


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

  selector: 'page-check-attendance',
  templateUrl: 'check-attendance.html',
export class CheckAttendancePage {

      studentList$: Observable<Student[]>

  attendance: Attendance = {
    name: '',
    status: ''

  constructor(private afDatabase: AngularFireDatabase,private studentsList:StudentListService,     private attendanceList: AttendanceListService,
    public navCtrl: NavController, public navParams: NavParams) {
      this.studentList$ = this.studentsList
        changes => {
          return => ({
            key: c.payload.key, ...c.payload.val()

  ionViewDidLoad() {
    console.log('ionViewDidLoad CheckAttendancePage');

  addAttendance(attendance: Attendance){
    this.attendanceList.addAttendance(attendance).then(ref => {
      this.navCtrl.setRoot('HomePage', {key: ref.key})



Check Attendance Students
<ion-item *ngFor="let student of studentList$ | async">
  <ion-input disabled="true" value="{{}}"> </ion-input>

  <ion-select item-end [(ngModel)]="attendance.status">
    <ion-option value="present">Present</ion-option>
    <ion-option value="absent">Absent</ion-option>
    <ion-option value="late">Late</ion-option>
  <button ion-button block clear (click)="addAttendance(attendance)"> Check!


import { Injectable } from "@angular/core";
import { Attendance } from "../../models/attendance/attendance.model";
import { AngularFireDatabase } from "angularfire2/database";
import { Student } from "../../models/students/students.model";

export class AttendanceListService {

    private attendanceListRef = this.db.list<Attendance>('attendance')
    private studentListRef = this.db.list<Student>('students-list')

    constructor(private db: AngularFireDatabase){}

    getStudentList() {
        return this.studentListRef;

    addAttendance(attendance: Attendance) {
        return this.attendanceListRef.push(attendance)


export interface Attendance {
    name: string;
    status: string;
1 Like