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

我有一张名单，我想按名字的开头字母来排序。因此，我编写了按钮来选择名称的第一个字母。现在，我只想使用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>

{{letter}
//伪码
//仅显示以“字母”开头的名称

---

我的问题是，是否有类似于我用来预选项目的伪代码

*ngIf=“name.startswith（letter）

的东西？

我为您创建了此Stackblitz：

组件技术

  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>

{{letter}
{{name}}

---

它可以满足您的要求，但是对于这种类型的东西，您应该使用自定义管道：

是的，有管道的概念来对元素进行排序。 像这样使用它

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

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

import { Flyer } from './heroes';

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