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

Question

I'm working on an app that uses ionic-selectable for a dropdown list and when an item is selected the fields below the selector would auto populate the items' values. 但我什至在绑定填充字段之前就被困住了。当我尝试在事件更改时控制台记录所选项目的值时，控制台中什么也没有出现，甚至没有错误。

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);}


}

模块.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 {}

我已经查看了问题，但没有发现它的编写方式有什么问题。我对编码很陌生，所以如果我的问题的礼仪不正确，我深表歉意。任何帮助表示赞赏。谢谢你。

标签： angularionic-frameworkcomponentsviewchild