离子3 - 单/双向绑定用法

Question

该应用程序的目的是检查学生是否缺席或在场。用于测试目的。我的应用程序上有这个代码。

HTML

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

<ion-item>
  <ion-input [(ngModel)]="attendance.studentName[0]" type="text"></ion-input>
  <ion-select item-end [(ngModel)]="attendance.status[0]">
    <ion-option value="Present">Present</ion-option>
    <ion-option value="Absent">Absent</ion-option>
  </ion-select>
</ion-item>

<ion-item>
  <ion-input [(ngModel)]="attendance.studentName[1]" type="text"></ion-input>
  <ion-select item-end [(ngModel)]="attendance.status[1]">
    <ion-option value="Present">Present</ion-option>
    <ion-option value="Absent">Absent</ion-option>
  </ion-select>
</ion-item>

</ion-list>

TS

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

目前，我使用双向绑定“[（ngModel）]”作为输入和选择标签。但是当我输入并选择一个选项时，这两个选项都正在编辑中。但是当我使用单向绑定“[ngModel]”时。同时编辑输入和选择选项的问题消失了。但我在console.log上什么都没得到

Answer 1

首先在.ts文件中编辑

  public attendance: any[] = [
    {
      studentName: 'Alice',
      status: 'whatever'
    },
    {
      studentName: 'Bob',
      status: 'whatever'
    }

  ];

需要使用.html更改*ngFor

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

  <div *ngFor="let student of attendance">

    <ion-item >
      <ion-input [(ngModel)]="student.studentName" type="text"></ion-input>
      <ion-select item-end [(ngModel)]="student.status">
        <ion-option value="Present">Present</ion-option>
        <ion-option value="Absent">Absent</ion-option>
      </ion-select>
    </ion-item>

  </div>


</ion-list>

这是输出图像

Answer 2

你在每个ion-item中瞄准同一个对象。您有一个名为attendance的类属性。

每当Angular为attendance.studentName赋值时，它都会覆盖先前设置的任何值，或者默认的初始值（空数组）。

每个离子输入和ion-select必须以组件类中的不同对象为目标。

典型的方法是使用一个对象数组，然后在HTML模板中循环遍历数组（使用* ngFor）。

数组可能是这样的：

public attendance: any[] = [
    {
        studentName: 'Alice',
        status: 'whatever'
    },
    {
        studentName: 'Bob',
        status: 'whatever'
    }
]