时间戳

首页 > 解决方案 > 实施 Ionic Select Searchable 组件时遇到问题

ionic-framework - 实施 Ionic Select Searchable 组件时遇到问题

问题描述

我目前正在学习 Ionic 框架，我最近尝试了 select searchable 组件来选择单个项目和另一个用于选择多个项目。

但是当我编译项目时，出现以下错误：

Template parse errors:
Can't bind to 'canReset' since it isn't a known property of 'select-searchable'.
1. If 'select-searchable' is an Angular component and it has 'canReset' input, then verify that it is part of this module.
2. If 'select-searchable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[canSearch] = "true"
(onChange) = "userChanged($event)"
[ERROR ->][canReset]= "true"
okButtonText = "Proceed with users"
resetButtonText = "Clear selected"
"): ng:///AppModule/HomePage.html@33:4
Can't bind to 'noItemsFoundText' since it isn't a known property of 'select-searchable'.
1. If 'select-searchable' is an Angular component and it has 'noItemsFoundText' input, then verify that it is part of this module.
2. If 'select-searchable' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
resetButtonText = "Clear selected"
(onClose) = "onClose($event)"
[ERROR ->][noItemsFoundText] = "'No users found.'"
[shouldStoreItemValue] = "false">
</select-searchable>"): ng:///AppModule/HomePage.html@37:4
at syntaxError (compiler.js:486)
at TemplateParser.parse (compiler.js:24674)
at JitCompiler._parseTemplate (compiler.js:34629)
at JitCompiler._compileTemplate (compiler.js:34604)
at compiler.js:34505
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34505)
at compiler.js:34375
at Object.then (compiler.js:475)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)

我试过没有多选可搜索组件，它工作得很好。但我也想测试多选组件。

这是该项目的代码：

主页.ts：

import { Component, ViewChild } from '@angular/core';
import { NavController, ToastController } from 'ionic-angular';
import { SelectSearchableComponent } from 'ionic-select-searchable';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('myselect') selectComponent: SelectSearchableComponent;

user = null;
userIds = [];

users = [
{
    id: 0,
    name: 'Simon Grimm',
    country: 'Germany'
},
{
    id: 1,
    name: 'Max Lynch',
    country: 'Wisconsin'
},
{
    id: 2,
    name: 'Nic Raboy',
    country: 'California'
}
];


constructor(public navCtrl: NavController, private toastCtrl: ToastController) {

}

userChanged(event:{component: SelectSearchableComponent, value:any}){
    //user selected
    console.log('event: ', event);
}

onClose()
{
    let toast = this.toastCtrl.create({
    message: 'Thanks for your selection',
    duration: 2000
    });
    toast.present();
    console.log('users: ', this.userIds);
}

openFromCode()
{
    this.selectComponent.open();
}

}

主页.html：

<ion-header>
<ion-navbar color="primary">
    <ion-title>
    Ionic Searchable Select
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content>
<ion-item>
    <ion-label>Select user</ion-label>
    <select-searchable
    item-content
    [(ngModel)] = "user"
    [items] = "users"
    itemValueField = "id"
    itemTextField = "name"
    [canSearch] = "true"
    (onChange) = "userChanged($event)">
</select-searchable>
</ion-item>

<ion-item>
    <ion-label>Select multiple users</ion-label>
    <select-searchable #myselect
    item-content
    [isMultiple] = "true"
    [(ngModel)] = "userIds"
    [items] = "users"
    itemValueField = "id"
    itemTextField = "name"
    [canSearch] = "true"
    (onChange) = "userChanged($event)"
    [canReset]= "true"
    okButtonText = "Proceed with users"
    resetButtonText = "Clear selected"
    (onClose) = "onClose($event)"
    [noItemsFoundText] = "'No users found.'"
    [shouldStoreItemValue] = "false">
</select-searchable>
</ion-item>

<button ion-button full color="primary" (click) = "openFromCode()">Open select</button>
</ion-content>

而且当我点击“打开选择”按钮时，它会返回以下错误：

ERROR TypeError: Cannot read property 'open' of undefined
at HomePage.webpackJsonp.194.HomePage.openFromCode (VM1614 main.js:95)
at Object.eval [as handleEvent] (HomePage.html:43)
at handleEvent (VM1613 vendor.js:13915)
at callWithDebugContext (VM1613 vendor.js:15424)
at Object.debugHandleEvent [as handleEvent] (VM1613 vendor.js:15011)
at dispatchEvent (VM1613 vendor.js:10330)
at VM1613 vendor.js:10955
at HTMLButtonElement.<anonymous> (VM1613 vendor.js:39452)
at t.invokeTask (VM1607 polyfills.js:3)
at Object.onInvokeTask (VM1613 vendor.js:5077)

请帮我解决这个问题。

标签： ionic-frameworkhybrid-mobile-app

解决方案

只需确保您已在以下位置安装并添加它们 1

  1. app.module.ts
  2. home.module.ts
  3. 主页.ts

通过“添加”，我的意思是执行以下操作

导入喜欢

import { SelectSearchableModule } from 'ionic-select-searchable';

并将它们添加到 @NgModule 导入中，例如

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

推荐阅读