Ionic выберите ngModel весь объект - PullRequest
Новая
       21

Ionic выберите ngModel весь объект

0 голосов
/ 08 марта 2019

Мой код выглядит так: 

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

Ответы [ 2 ]

1 голос
/ 08 марта 2019

Вы должны установить его на выбор: 

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

в тс: 

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

проверка ДЕМО .

0 голосов
/ 08 марта 2019

Используйте CompareWith, чтобы выбрать значение по умолчанию. Также обратите внимание на использование [(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, вы можете использовать любые другие свойства или комбинации свойств.

...