Question

我有一个名字列表，我想按它们的首字母排序。因此，我写了一些按钮来选择名称的第一个字母。现在，我只想使用ngIf显示以所选字母开头的名称。

<button *ngFor = "let letter of alphabet" (click)="showSelectedLetter(letter)">{{letter}}</button>
  <div *ngFor="let name of names">
    <button *ngIf="name.startswith(letter)"> // Pseudocode
      // only names beginning with "letter" are shown
    </button>
  </div>

我的问题是，是否有类似我用来预选项目的伪代码*ngIf="name.startswith(letter)？

Answer 1

是的，管道的概念是对元素进行排序。像

一样使用

<button *ngFor = "let letter of (alphabet|sortByAlphabets)"></button>

并使用sortByAlphabets命令创建管道ng g p sortByAlphabets。

在新创建的sortByAlphabets管道中写入排序逻辑。

您的sortByAlphabets.pipe.ts文件看起来像

import { Pipe, PipeTransform } from '@angular/core';

import { Flyer } from './heroes';

@Pipe({ name: 'sortByAlphabets' })
export class SortByAlphabetsPipe implements PipeTransform {
  transform(array) {
    return array.sort();
  }
}

Answer 2

我为您创建了这个Stackblitz：https://stackblitz.com/edit/angular-ujnsur

component.ts

  public alphabet = ['a', 'b', 'c'];
  public names = ['aname', 'bname', 'cname'];
  public selectedLetter;

  showSelectedLetter(letter: string) {
    this.selectedLetter = letter;
  }

  filterByFirstLetter(name) {
    return name.slice(0,1) === this.selectedLetter;
  }

component.html

<button *ngFor = "let letter of alphabet" (click)="showSelectedLetter(letter)">{{letter}}</button>
  <div *ngFor="let name of names">
    <div *ngIf="filterByFirstLetter(name)">
      {{name}}
    </div>
  </div>

它可以满足您的要求，但是对于这种类型的事情，您应该使用自定义管道：https://angular.io/guide/pipes#custom-pipes

让ngIf根据其开头字母对元素进行排序

2 个答案: