Question

我不会根据所选的细分值来过滤单词，例如，细分具有类似 | aa | ab |交流|广告| AE | af | ......等。然后点击该细分受众群之一应显示相关字词，例如，点击| ab |应该只显示以“ ad”开头的单词，依此类推。

我当前解决此问题的方法（不适用于c）。

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

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

1 个答案: