Ionic select ngModel 整个对象

Question

我的代码是这样的：

<ion-select [(ngModel)]="current_language" okText="Okay" cancelText="Dismiss" (ionChange)="changeLanguage()">
    <ion-select-option *ngFor="let language of languages" [value]="language">{{language.name}}
    </ion-select-option>
  </ion-select>

当我选择其中之一并在 .ts 文件中单击 "Okay" 时 current_language 正是我所选择的。但问题是我认为另一种绑定方式不起作用。因为最初进入页面时没有选择current_language。

这是我的语言：

Language{
id: number;
name: string;
flag: string;
code: string;
status: number;

}

那么我应该怎么做才能实现 Language 对象的双向绑定？因为我需要选择的整个 Language 对象。

Answer 1

您应该将其设置为 select:

<ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="current_language">
          <ion-option *ngFor="let language of languages; let i = index" [value]="language" [selected]="i === 0"> // selects first item
              {{language.name}} 
          </ion-option>
      </ion-select>
  </ion-item>

或用你的数组项之一给你的 ngModel 赋值：

<ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="current_language">
          <ion-option *ngFor="let language of languages;" [value]="language">
              {{language.name}} 
          </ion-option>
      </ion-select>
  </ion-item>

在 ts:

current_language = this.languages[0]; // selects first item

更新：如果您正在获取当前语言形式的商店：

ngOnInit(){
    let fromStore: Language =  {name: 'second' , id:1};
    let index: number = this.languages.findIndex(item => item.id === fromStore.id);
    this.current_language = this.languages[index];
  }

检查DEMO。

Answer 2

使用 CompareWith 到 select 默认值。还要注意 [(value)]

的使用

在模板中，添加：

<ion-select [(ngModel)]="current_language" okText="Okay" cancelText="Dismiss" (ionChange)="changeLanguage()" [compareWith]="compareObjects">
    <ion-select-option *ngFor="let language of languages" [(value)]="language">{{language.name}}
    </ion-select-option>
  </ion-select>

在组件ts文件中，添加函数：

compareObjects(o1: any, o2: any): boolean {
return o1._id === o2._id;//Compare by id
}

此实现使用 Id 进行比较，您可以选择使用任何其他属性或属性组合。

Ionic select ngModel 整个对象

Ionic select ngModel whole object

ionic-framework

angular-ngmodel

angular

ionic4