Ionic framework 实现离子选择可搜索组件时出现问题

我目前正在学习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)

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)

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

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

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)

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)

---

请帮助我解决此问题。

对于编译错误，您应该在AppModule中导入此组件的模块

在app.module.ts中，确保您有以下行：

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

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

对于第二个错误，您必须在html中使用字符标识此组件，在您的示例中，@ViewChild将其定义为myselect:

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

---

对于编译错误，应在AppModule中导入此组件的模块

在app.module.ts中，确保您有以下行：

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

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

对于第二个错误，您必须在html中使用字符标识此组件，在您的示例中，@ViewChild将其定义为myselect:

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

---

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

app.module.ts home.module.ts home.page.ts 我所说的“添加”是指执行以下操作

进口式

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

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

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

---

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

app.module.ts home.module.ts home.page.ts 我所说的“添加”是指执行以下操作

进口式

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

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

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

---

我从这篇文章中找到了解决方案我从这篇文章中找到了解决方案