使用正则表达式过滤离子段

Question

我不会根据所选的段值过滤单词，例如段的值如下 |一个| AB |交流 |广告 | AE |自动对焦 | ......等点击其中一个片段应显示相关词，例如点击| AB |应该只显示以 "ad" 开头的单词，依此类推。

我目前解决这个问题的方法（这是行不通的。）

// 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);
}

正则表达式的输出：

Answer 1

我已经这样修复了：

<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);
        }
    }

使用正则表达式过滤离子段

Filter through ionic segmet using regex

ionic2

angular

ionic4