Фильтровать через ионный сегмент с помощью регулярных выражений - PullRequest
Новая
       15

Фильтровать через ионный сегмент с помощью регулярных выражений

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

Я хочу фильтровать слова в зависимости от выбранного значения сегмента, например, сегменты имеют такие значения, как | аа | ab | AC | объявление | ае | аф | ...... и т. д. И нажмите на один из сегментов должны показывать соответствующие слова, например, нажмите | ab | должны отображаться только слова, начинающиеся с «реклама» и т. д.

enter image description here

Мой текущий метод решения этой проблемы (который не работает ofc.) 

// letter.page.html
<ion-segment scrollable mode="md" (ionChange)="filterWords($event)" [(ngModel)]="filter.query">
    <ion-segment-button mode="md" class="ce-sm-segment" value="all">
        <ion-icon name="infinite"></ion-icon>
    </ion-segment-button>
    <ion-segment-button mode="md" class="ce-sm-segment" value="starred">
        <ion-icon name="star-outline"></ion-icon>
    </ion-segment-button>
    <ion-segment-button mode="md" *ngFor="let ltr of twoLettersList" class="ion-text-lowercase" value={{ltr}}>
        {{ltr}}
    </ion-segment-button>
</ion-segment>
<div [ngSwitch]="filter.q" *ngFor="let word of (words ? words : [])">
    <ion-item *ngSwitchCase="filter.q">
        <ion-label>
            {{word.word_core}}
        </ion-label>
    </ion-item>
</div>

//letter.page.ts
filter = {
    query: 'all',
    q: 'all' as any
};
filterWords($event) {
    console.log('All: ', $event.detail.value);
    console.log('Query: ', this.filter.query);
    this.filter.q = new RegExp('^' + this.filter.query + '\\w+');
    console.log('Filtered: ', this.filter.q);
}

Вывод регулярного выражения: enter image description here

1 Ответ

0 голосов
/ 12 июля 2019

Я исправил это так: 

<ion-segment scrollable mode="md" [(ngModel)]="filter">
    <ion-segment-button mode="md" class="ce-sm-segment" value="all" (click)="showSelectedLetterPopup('all')">
        <ion-icon name="medical"></ion-icon>
    </ion-segment-button>
    <ion-segment-button mode="md" class="ce-sm-segment" value="starred" (click)="showSelectedLetterPopup('☆')">
        <ion-icon name="star-outline"></ion-icon>
    </ion-segment-button>
    <ion-segment-button mode="md" *ngFor="let ltr of twoLettersList" class="ion-text-lowercase" value={{ltr}}
        (click)="showSelectedLetterPopup(ltr)">
        {{ltr}}
    </ion-segment-button>
</ion-segment>
<div *ngFor="let word of (words ? words : [])">
    <div [ngSwitch]="filterWords(word.word_core)">
        <ion-item *ngSwitchCase="filter" routerLink="/tabs/dictionary/word-detail/{{word.id}}">
            <ion-label>
                {{word.word_core}}
            </ion-label>
        </ion-item>
    </div>
</div>

компонент: 

 filterWords(word: string) {
        if (this.filter == 'all') {
            return 'all';
        } else if (this.filter == '☆') {
            return '';
        } else {
            return word.toLowerCase().substr(0, 2);
        }
    }
...