-2

请帮忙。

我在我的应用程序上得到了这行代码，这里输入的值来自 firebase 数据库。这在我运行应用程序时显示的值有效。我的问题是当我 console.log(attendance.studentName) 时。它没有得到价值。它是 null 或 {}。

HTML

<ion-item *ngFor="let student of studentList$ | async">
    <!-- problem here, ngModel -->
    <ion-input [ngModel]="attendance.studentName" [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>

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

模型

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

服务

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

请帮忙

4

2 回答 2

1

为什么您对 ngModel 和输入的 value 属性使用不同的名称。您使用的语法不起作用尝试使用以下语法：

使用 ngModel：

<ion-item *ngFor="let student of studentList$ | async">
    <ion-input [(ngModel)]="student.name></ion-input>
</ion-item>

或在输入时没有简写语法

<ion-input [ngModel]="student.name" (ngModelChange)="student.name = $event" </ion-input>

没有 ngModel 指令：

<ion-item *ngFor="let student of studentList$ | async">
    <ion-input [value]="student.name" (input)="student.name = $event.target.value"></ion-input>
</ion-item>
于 2018-03-20T06:31:42.903 回答
0

我能够得到输入的值..

html

<ion-item *ngFor="let student of studentList$ | async">

  <!-- problem here, ngModel -->  
  <ion-input [(ngModel)]="attendance.studentName" [value]="attendance.name" 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>

ts

出勤：任何= {'学生姓名'：''，'状态'：''}

然后在构造函数上

  this.attendance.studentName = "asdasd"

我的问题是 this.attendance.studentName 的值应该来自firebase。我不知道该怎么做。

于 2018-03-20T17:57:47.800 回答