Ionic 3 Firebase push array

Ionic Framework ionic-v3
1

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).

PROBLEMS:

  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…

check-attendance.ts

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';

@IonicPage()
@Component({
  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
      .getStudentList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            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.html

Check Attendance Students 
<ion-item *ngFor="let student of studentList$ | async">
  <ion-input disabled="true" value="{{student.name}}"> </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>
  </ion-select>
</ion-item>
  </ion-list>
  <button ion-button block clear (click)="addAttendance(attendance)"> Check!

attendance.service.ts

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

@Injectable()
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)
    }
}

attendance.model.ts

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