Ionic 3 Firebase推送阵列

Question

我正在构建一个考勤应用程序，我很难推送一系列数据。

我最初从firebase实时数据库中取出所有学生，并使用ngFor循环所有学生，然后我使用离子选择来表示学生的状态（现在，缺席或迟到）。

问题： 1.当我设置学生的状态时，例如迟到，所有学生都将被标记为迟到。 2.当我点击保存时，只有一名学生将被推送到数据库

我确信这是因为ngFor或其他。我是Ionic的新手。请帮忙。

页面看起来像这样......

我的代码看起来像这样......

检查-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})
    })
  }

}

检查-attendance.html

<ion-header>
  <ion-navbar>
    <ion-title>Check Attendance</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-list-header>
      Students
    </ion-list-header>

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