Ионный выбор всего объекта ngModel

#angular #ionic-framework #angular-ngmodel #ionic4

#angular #ионный фреймворк #angular-ngmodel #ionic4

Вопрос:

Мой код выглядит следующим образом:

 <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 объект, который был выбран.

Ответ №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];
  }

проверьте ДЕМОНСТРАЦИЮ.

1. но я получаю current_language из хранилища, так что это. языки [0] будут неправильными, ни [selected]=»i === 0″

2. что такое хранилище? :)) вы имеете в виду получить его асинхронно с сервера?

3. Хорошо, теперь я знаю, вы должны получить get current language из хранилища и найти его в своем массиве languages, затем найти индекс и присвоить его current_language.

4. @O.Shekriladze сейчас я обновил ответ и демонстрационную проверку.

5. Спасибо @Fateme Fazli , [(ngModel)]=»prog» (ionChange)=»progChange(prog)»

Ответ №2:

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