Question

我目前正在学习Ionic框架，最近我尝试了select可搜索的组件来选择一个项目，并选择另一个来选择多个项目。

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

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)

我尝试了不使用多重选择可搜索组件，并且效果很好。但是我也想测试多重选择组件。

这是项目中的代码：

Home.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();
}

}

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>

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

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)

请帮助我解决此问题。

Answer 1

对于编译错误，您应该在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>

Answer 2

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

app.module.ts
home.module.ts
home.page.ts

“添加”是指执行以下操作

像导入一样

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

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

@NgModule({
    imports: [
        SelectSearchableModule
    ]
})

难以实现Ionic Select可搜索组件

2 个答案: