[英]How to make a select option as default selected in angular using ng-multiselect-dropdown?
So here I am getting data from the database and store it into events array.所以在这里我从数据库中获取数据并将其存储到事件数组中。 this events array data is shown on book-ticket.component.html using ng-multiselect-dropdown.
此事件数组数据使用 ng-multiselect-dropdown 显示在 book-ticket.component.html 上。 From here on selecting one option this data corresponding to selected item stored in this.event.
从这里开始选择一个选项,此数据对应于存储在 this.event 中的所选项目。
I am passing id from the another component to this book-ticket.component and here we received it using我正在将 id 从另一个组件传递给这个 book-ticket.component,在这里我们使用
this.idByAllEvents = this.activatedRoute.snapshot.params.id;
HTML part of book-ticket Component is book-ticket 组件的 HTML 部分是
<div class="form-group">
<label>Event</label>
<ng-multiselect-dropdown [placeholder]="'Select the Event'" [data]="this.events" name="event"
[(ngModel)]="this.event" [settings]="dropdownSettings1">
</ng-multiselect-dropdown>
</div>
.ts part of book-ticket component is book-ticket 组件的 .ts 部分是
export class BookTicketComponent implements OnInit {
user:User;
event:Event;
offer:Offer;
// offer:string;
// event:string;
idByAllEvents: string; // This is coming from all events page
price:number;
percentageReduce:number;
offers:Offer[];
events:Event[];
dropdownSettings1: IDropdownSettings;
dropdownSettings2: IDropdownSettings;
selectedItem: any[];
constructor(private Userservice:UserService,private Offerservice:OfferService,
private Eventservice:EventService, private router:Router,
private activatedRoute:ActivatedRoute) {
this.idByAllEvents = this.activatedRoute.snapshot.params.id;
console.log(this.idByAllEvents);
this.user = new User();
// this.offer = new Offer();
// this.event = new Event();
// this.offer = new Offer();
// this.event = new Event();
this.selectedItem = [];
}
ngOnInit() {
this.dropdownSettings1 = {
singleSelection: true,
idField: '_id',
textField: 'name',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true,
closeDropDownOnSelection: true,
};
this.Eventservice.GetEvents().subscribe(res => {
this.events = res;
this.justExecute();
this.Offerservice.GetOffers().subscribe(res => {
this.offers = res
})
});
justExecute(){
console.log(this.idByAllEvents);
console.log(this.events);
for (let index = 0; index < this.events.length; index++) {
const element = this.events[index]._id;
console.log(element);
if(element == this.idByAllEvents){
this.selectedItem.push(this.events[element]);
// this.selectedItem = this.events[element]
}
}
console.log(this.selectedItem);
}
}
SaveData(form:NgForm) {
if(form.valid) {...}
}
}
I want that option corresponding to this.idByAllEvents is selected by default ON HTML page.我希望在 HTML 页面上默认选择与 this.idByAllEvents 对应的选项。 But dropdown list shows all the options of this.events.
但是下拉列表显示了 this.events 的所有选项。
I tried using setting selectedItem by function justExecute but console.log(this.selectedItem)
gives undefined array.我尝试通过函数 justExecute 使用设置 selectedItem 但
console.log(this.selectedItem)
给出了未定义的数组。 If we get value corresponding to idByAllEvents in selectedItem then can we use [(ngModel)]="selectedItem"
on html page to select that value.如果我们在 selectedItem 中获得与 idByAllEvents 对应的值,那么我们可以在 html 页面上使用
[(ngModel)]="selectedItem"
来选择该值。
How we should do this this.我们应该如何做到这一点。 Is any another way to do it present .
有没有其他方法可以做到这一点。
如果ng-multiselect-dropdown
用于响应式表单的FormGroup
,请确保包含[ngModelOptions]='{standalone: true}'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.