Javascript 如何使用ng multiselect下拉列表将选择选项设置为角度中的默认选择？

所以这里我从数据库中获取数据并将其存储到事件数组中。此事件数组数据使用ng multiselect下拉列表显示在book-ticket.component.html上。从这里开始，选择一个选项，此数据对应于存储在this.event中的选定项
我正在将另一个组件的id传递给这个book-ticket.component，在这里我们使用

this.idByAllEvents = this.activatedRoute.snapshot.params.id;

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>

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) {...}
}
}

事件

.ts预订票证组件的一部分是

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

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) {...}
}
}

导出类BookTicketComponent实现OnInit{
用户：用户；
事件：事件；
要约：要约；
//报价：字符串；
//事件：字符串；
IDbyalEvents:string；//这来自“所有事件”页面
价格：数量；
百分比减少：数字；
报价：报价[]；
事件：事件[]；
下降设置1：IDropdownSettings；
下降设置2：IDropdownSettings；
selectedItem:any[]；
构造函数（私有Userservice:Userservice，私有Offerservice:Offerservice，
私有事件服务：事件服务，私有路由器：路由器，
私有activatedRoute:activatedRoute）{
this.idbyalEvents=this.activatedRoute.snapshot.params.id；
console.log（this.idbyalevents）；
this.user=新用户（）；
//this.offer=新的offer（）；
//this.event=新事件（）；
//this.offer=新的offer（）；
//this.event=新事件（）；
this.selectedItem=[]；
}
恩戈尼尼特（）{
此参数为0.dropdownSettings1={
单选：对，
idField:“\u id”，
textField:'名称'，
selectAllText:“全选”，
unSelectAllText:“取消全部选择”，
项目限制：3，
allowSearchFilter:正确，
closeDropDownOnSelection：没错，
};
this.Eventservice.GetEvents（）.subscribe（res=>{
this.events=res；
this.justExecute（）；
this.Offerservice.GetOffers（）.subscribe（res=>{
this.offers=res
})
});
justExecute（）{
console.log（this.idbyalevents）；
console.log（this.events）；
for（让index=0；index

我希望在HTML页面上默认选择与this.idbyalEvents对应的选项。但下拉列表显示了this.events的所有选项

我尝试使用函数justExecute设置selectedItem，但是

console.log（this.selectedItem）

给出了未定义的数组。 如果我们在selectedItem中获得对应于IDbyalEvents的值，那么我们可以在html页面上使用

[（ngModel）]=“selectedItem”

来选择该值

我们应该如何做到这一点。

---

如果在反应式表单的

FormGroup

中使用了

ng multiselect下拉列表

，请确保包含

[ngModelOptions]='{standalone:true}'

如果在反应式表单的

FormGroup

中使用了

ng multiselect下拉列表

，请确保包含

[ngModelOptions]='{standalone:true}'

在justExecute（res）中传递响应，然后尝试执行功能。我想它会起作用..点击try@AsisThanks进行回复，我通过了，现在我在selectedItem中获得了值，但当我设置[（ngModel）]=“selectedItem时它给出了错误。您得到的错误不是在下拉列表中自动选择selectedItem的值。selectedItem是一个数组，其中包含一个元素作为事件对象。在justExecute（res）中传递响应然后试着做这个功能。我想它会起作用的。点击try@AsisThanks进行回复，我通过了，现在我在selectedItem中得到了值，但是当我设置[（ngModel）]=“selectedItem”它给出了错误。您得到的错误不是在下拉列表中自动选择selectedItem的值。selectedItem是一个数组，其中包含一个元素作为事件对象。