пусть ngIf сортирует элементы по их начальной букве

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

Да, есть концепция Pipe для сортировки ваших элементов. Используйте это как

<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