离子可选组件，所选值未显示在控制台日志中

如何解决离子可选组件，所选值未显示在控制台日志中

我正在一个应用程序，利用离子可选择为下拉列表，并且当项目被选择的选择器将自动填充项的值以下字段。但是我甚至在试图填充字段之前就被卡住了。当我尝试控制台记录事件更改时所选项目的值时，控制台中什么都没有出现，甚至没有错误。

html：

<ion-content [fullscreen]="true">
  <ion-grid>
    <ion-row>
      <ion-col size-lg="6" md="3">
    <ion-item>
    <ion-label>Vehicle Search</ion-label>
    <ionic-selectable
      #selectComponent
      [(ngModel)]="selected"
      [items]="vehicles"
      itemValueField="id"
      itemTextField="name"
      [canSearch]="true"
      searchFailText= "Vehicle not found">
  </ionic-selectable>
  </ion-item>
  </ion-col>
  </ion-row>

ts代码：

import { Component,ViewChild } from '@angular/core';
import {  IonicSelectableComponent } from 'ionic-selectable';

@Component({
  selector: 'app-work-order',templateUrl: './work-order.page.html',styleUrls: ['./work-order.page.scss'],})

export class WorkOrderPage {
  vehicles = [
      { id:1,name: 'Chevy Truck',unitNumber: 123 },{ id:2,name: 'Ford Truck',unitNumber: 456 },{ id: 3,name: 'Dodge Truck',unitNumber: 789 }
    ];
    @ViewChild('selectComponent') selectComponent: IonicSelectableComponent;
    selected = [];

    vehicleChanged(event: {
      component: IonicSelectableComponent,value: any

      })
      {console.log(event.unitNumber);}


}

module.ts

import { IonicSelectableModule } from 'ionic-selectable';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { WorkOrderPage } from './work-order.page';


@NgModule({
  imports: [
    CommonModule,FormsModule,IonicModule,RouterModule.forChild([
      {
        path: '',component: WorkOrderPage
      }

    ]),IonicSelectableModule
  ],declarations: [WorkOrderPage]
})
export class WorkOrderPageModule {}

我已经浏览了所有问题，但没有发现编写方式出了什么问题。我对编码非常陌生，因此如果我的问题的礼节不正确，我深表歉意。任何帮助表示赞赏。谢谢。