Question

请帮助。

我在我的应用程序上获得了这行代码，输入的值来自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)    
  }

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

请帮助

Answer 1

为什么要为ngModel使用不同的名称和输入的value属性。您正在使用的语法无法尝试使用以下语法：

使用ngModel：

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

OR没有输入的简写语法

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

Answer 2

我能够获得输入的值..

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。我不知道该怎么做。

ngModel无法获取输入

2 个答案: