angular - 离子选择 ngModel 整个对象
问题描述
我的代码如下所示:
<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 文件中单击“确定”时,current_language
这正是我所选择的。但问题是我认为另一种绑定方式不起作用。因为当我进入页面时最初current_language
没有选择。
这是我的语言:
Language{
id: number;
name: string;
flag: string;
code: string;
status: number;
}
那么我应该怎么做才能有两种方式绑定Language
对象呢?因为我需要选择的整个Language
对象。
解决方案
您应该将其设置为选择:
<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];
}
检查演示。