Проблема с реализацией компонента Ionic Select с возможностью поиска - PullRequest
Новая
       10

Проблема с реализацией компонента Ionic Select с возможностью поиска

0 голосов
/ 19 мая 2019

В настоящее время я изучаю Ionic Framework, и недавно я попробовал компонент 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)

Я пробовал без компонента множественного выбора с возможностью поиска, и он работал нормально.Но я хочу также протестировать компонент множественного выбора.

Вот код из проекта:

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)

Пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 19 мая 2019

Для ошибки компиляции вы должны импортировать модуль этого компонента в свой 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>
...