[英]How to set default selected values in multiselect with ngModel in Angular 2
How to set default selected values in multiselect. 如何在multiselect中设置默认选定值。 I get
current_options
and all_options
from database and I want to update current_options
and send new values do database again. 我从数据库中获取
current_options
和all_options
,我想更新current_options
并再次发送新值数据库。
Updating database works but when I refresh page none of options are selected. 更新数据库有效但当我刷新页面时,没有选择任何选项。
current_options = [{id:1, name:'name1'}]; #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}]; #from database
My template: 我的模板:
<select multiple name="type" [(ngModel)]="current_options">
<option *ngFor="let option of all_options" [ngValue] = "option">
{{option.name}}
</option>
</select>`
If you will pass the values as an id array to ngModel 如果您将值作为id数组传递给ngModel
let idArrary = ["1"];
<select multiple name="type" [(ngModel)]="idArrary">
<option *ngFor="let option of all_options" [ngValue] = "option">
{{option.name}}
</option>
</select>
` `
You should be using an array of selected items 您应该使用一系列选定的项目
<select [(ngModel)]="selectedElement" multiple>
<option *ngFor="let type of types" [ngValue]="type"> {{type.Name}}</option>
</select>
My selected item will be as below 我选择的项目如下
selectedElement:any= [
{id:1,Name:'abc'},
{id:2,Name:'abdfsdgsc'}];
current_options = [all_options[0]]
To initialize the default value of your input. current_options = [all_options[0]]
初始化输入的默认值。
Current_options need to be initialize with an array containing the same objects present in all_options. Current_options需要使用包含all_options中存在的相同对象的数组进行初始化。
I forked the Plunker from another answer to illustrate it. 我从另一个答案中分出了Plunker来说明它。
Keep in mind that : 请记住:
{id:1, name:'name1'} !== {id:1, name:'name1'}
Edit: 编辑:
Assuming current_options is already containing some value you are receiving from your server: 假设current_options已包含您从服务器收到的某些值:
current_options = current_options.map((current_option) => {
return all_options.find((all_option) => current_option.id === all_option.id);
})
Or probably more performant: 或者可能性能更高:
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];
}
}
}
Edit: According to angular documentation you can use a compare with function to specify how to assume two objects are equal. 编辑:根据角度文档,您可以使用与函数的比较来指定如何假设两个对象相等。
<select multiple [compareWith]="compareFn" ...>
</select>
compareFn(c1: Category, c2: Category): boolean {
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
If you want create multiple select and option with ngModel and set default value and two way bind its working code 如果你想用ngModel创建多个select和option并设置默认值,并且双向绑定其工作代码
<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]);
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.