如何使用 ng-multiselect-dropdown 在 angular 中將選擇選項設為默認選擇？

Question

所以在這里我從數據庫中獲取數據並將其存儲到事件數組中。 此事件數組數據使用 ng-multiselect-dropdown 顯示在 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>

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

我希望在 HTML 頁面上默認選擇與 this.idByAllEvents 對應的選項。 但是下拉列表顯示了 this.events 的所有選項。

我嘗試通過函數 justExecute 使用設置 selectedItem 但console.log(this.selectedItem)給出了未定義的數組。 如果我們在 selectedItem 中獲得與 idByAllEvents 對應的值，那么我們可以在 html 頁面上使用[(ngModel)]="selectedItem"來選擇該值。

我們應該如何做到這一點。 有沒有其他方法可以做到這一點。

Answer 1

如果ng-multiselect-dropdown用於響應式表單的FormGroup ，請確保包含[ngModelOptions]='{standalone: true}'