ngModel doesnt get the input value from firebase

Ionic Framework ionic-v3
1

PLEASE HELP.

I got this lines of code on my app, the value of the input here comes from the firebase database. That works as the value is shown when I ran the app. My problem is when i console.log(attendance.studentName). It doesnt get the value. It is null or {}.

HTML

<ion-item *ngFor="let student of studentList$ | async">
    <!-- problem here, ngModel -->
    <ion-input [ngModel]="attendance.studentName" [value]="student.name"></ion-input>
</ion-item>

TS

attendance = {} as Attendance

export class CheckAttendancePage {

  studentList$: Observable<Student[]>
  attendance = {} as Attendance 

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

  addAttendance(attendance: Attendance){
    console.log(attendance)    
  }

MODEL

export interface Attendance {
    key?: string;
    studentName: string;
    status: string;
}

SERVICE

@Injectable()
export class AttendanceListService {

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

  constructor(private db: AngularFireDatabase){}

  getStudentsList() { 
    return this.studentListRef;
  }

PLEASE HELP

2

That’s only one-way binding from attendance.studentName. If you want it to go both ways, you need [(ngModel)].

1 Like
3

Doesn’t work. Changed it to…

  <ion-input [(ngModel)]="attendance.studentName" value="{{student.name}}"></ion-input>

But I get this error…

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘John Doe’.

4

Where are u filling attendance with data?

Or am I not reading properly?

1 Like
5

That can generally be better interpreted as “you have two sources competing to set a property”. Get rid of the value attribute.

1 Like
8

I am getting the value now. But my problem now is that the value of the input is coming from firebase. Currently, I have 4 students on my firebase database. On constructor, I set the attendance.studentName = “asdasd”. So the output of the four inputs are the same. How do I set the value of the input from the firebase database?

HTML

<ion-item *ngFor="let student of studentList$ | async">
  <ion-input [(ngModel)]="attendance.studentName" type="text" disabled="true">{{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>

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 {

  studentList$: Observable<Student[]>

  attendance: any = {
    'studentName': '',
    'status': ''
  }

  constructor(private afDatabase: AngularFireDatabase, private studentsList: StudentListService, private attendanceList: AttendanceListService,
    public navCtrl: NavController, public navParams: NavParams) {

      this.attendance.studentName = "asdasd"

      this.studentList$ = this.studentsList
      .getStudentList()
      .snapshotChanges()
      .map(
        changes => {
          return changes.map(c => ({
            key: c.payload.key, ...c.payload.val()
          }))
        }
      )
    }

  addAttendance(attendance: Attendance){
    console.log(attendance)
  }

}