Как установить выбранные по умолчанию значения в множественном выборе с помощью ngModel в Angular 2

Question

Как установить выбранные значения по умолчанию в множественном выборе. я получил current_options а также all_options из базы данных, и я хочу обновить current_options и отправить новые значения сделать базу данных снова.

Обновление базы данных работает, но когда я обновляю страницу, ни один из вариантов не выбран.

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

Мой шаблон:

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`

Answer 1

current_options = [all_options[0]]Для инициализации значения по умолчанию вашего ввода.

Current_options необходимо инициализировать массивом, содержащим те же объекты, что и в all_options.

Я разветвлял Плункер из другого ответа, чтобы проиллюстрировать это.

Имейте в виду, что:

{id:1, name:'name1'} !== {id:1, name:'name1'}

Редактировать:

Предполагая, что current_options уже содержит некоторое значение, которое вы получаете от вашего сервера:

current_options = current_options.map((current_option) => {
   return all_options.find((all_option) => current_option.id === all_option.id);
})

Или, возможно, более производительный:

for (let i in all_options) { 
   for (let j in current_options) { 
      if (all_options[i].id === current_options[j].id ) { 
         current_options[j] = all_options[i]; 
      } 
   } 
}

Редактировать: Согласно угловой документации вы можете использовать функцию сравнения с функцией, чтобы указать, как считать два объекта равными.

<select multiple [compareWith]="compareFn" ...>
</select>

compareFn(c1: Category, c2: Category): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

Answer 2

Вы должны использовать массив выбранных элементов

<select [(ngModel)]="selectedElement" multiple>
     <option *ngFor="let type of types" [ngValue]="type"> {{type.Name}}</option>
</select>

Мой выбранный пункт будет как ниже

selectedElement:any= [
                {id:1,Name:'abc'},
                {id:2,Name:'abdfsdgsc'}];

LIVE DEMO

Answer 3

Если вы передадите значения в виде массива id в ngModel

let idArrary = ["1"];

<select multiple name="type" [(ngModel)]="idArrary">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>

`

Answer 4

Если вы хотите создать множественный выбор и параметр с помощью ngModel и установить значение по умолчанию и двухстороннее связывание его рабочего кода

<div  *ngFor="let options of optionsArray; let in = index">
 <br>
 <select [(ngModel)]="res[in]" >
 <option  [ngValue]="option" *ngFor="let option of options.options; let i =index">


{{option}}
</option>
</select>
 {{res[in]}}
</div>
{{res}}

export class ExComponent implements OnInit {
public res=[];
 public optionsArray = [
   {id: 1, text: 'Sentence 1', options:['kapil','vinay']},
   {id: 2, text: 'Sentence 2', options:['mukesh','anil']},
   {id: 3, text: 'Sentence 3', options:['viky','kd']},
  {id: 4, text: 'Sentence 4', options:['alok','gorva']},
]
ngOnInit() 
{
this.optionsArray.forEach(data=>{
 this.res.push(data.options[0]);
})
}