Ionic 3 - One/Two-Way 绑定用法

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': []
}]

目前，我正在为输入和 select 标签使用双向绑定“[(ngModel)]”。但是当我输入 select 一个选项时，这两个选项都在被编辑。但是当我使用单向绑定“[ngModel]”时。同时编辑输入和 select 选项的问题消失了。但我在 console.log

上一无所获

Answer 1

您在每个 ion-item 中都瞄准了同一个对象。您有一个名为 attendance.

的 class 属性

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

每个 ion-input 和 ion-select 都必须针对组件中的不同对象 class。

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

数组可以是这样的：

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

Answer 2

首先在.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>

这是输出图像

Ionic 3 - One/Two-Way 绑定用法

Ionic 3 - One/Two-Way Binding Usage

binding

ionic-framework

ionic3

two-way-binding

HTML

TS