KeyValuePipe — Angular

Преобразует объект или Map в массив пар «ключ-значение».

Использование канала

{{ value_expression | keyvalue:compareFn }}

API

class KeyValuePipe implements PipeTransform {
  constructor(differs: KeyValueDiffers): KeyValuePipe;
  transform<K, V>(input: ReadonlyMap<K, V>, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined): KeyValue<K, V>[];
  transform<K extends number, V>(input: Record<K, V>, compareFn?: ((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined): KeyValue<string, V>[];
  transform<K extends string, V>(input: Record<K, V> | ReadonlyMap<K, V>, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined): KeyValue<K, V>[];
  transform(input: null | undefined, compareFn?: ((a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number) | null | undefined): null;
  transform<K, V>(input: ReadonlyMap<K, V> | null | undefined, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined): KeyValue<K, V>[] | null;
  transform<K extends number, V>(input: Record<K, V> | null | undefined, compareFn?: ((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined): KeyValue<string, V>[] | null;
  transform<K extends string, V>(input: Record<K, V> | ReadonlyMap<K, V> | null | undefined, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined): KeyValue<K, V>[] | null;
  transform<T>(input: T, compareFn?: (T extends object ? (a: T[keyof T], b: T[keyof T]) => number : never) | undefined): T extends object ? KeyValue<keyof T, T[keyof T]>[] : null;
}

constructor

KeyValuePipe

@paramdiffersKeyValueDiffers

@returnsKeyValuePipe

transform

8 перегрузок

@paraminputReadonlyMap<K, V>

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[]

@paraminputRecord<K, V>

@paramcompareFn((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined

@returnsKeyValue<string, V>[]

@paraminputRecord<K, V> | ReadonlyMap<K, V>

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[]

@paraminputnull | undefined

@paramcompareFn((a: KeyValue<unknown, unknown>, b: KeyValue<unknown, unknown>) => number) | null | undefined

@returnsnull

@paraminputReadonlyMap<K, V> | null | undefined

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[] | null

@paraminputRecord<K, V> | null | undefined

@paramcompareFn((a: KeyValue<string, V>, b: KeyValue<string, V>) => number) | null | undefined

@returnsKeyValue<string, V>[] | null

@paraminputRecord<K, V> | ReadonlyMap<K, V> | null | undefined

@paramcompareFn((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined

@returnsKeyValue<K, V>[] | null

@paraminputT

@paramcompareFn(T extends object ? (a: T[keyof T], b: T[keyof T]) => number : never) | undefined

@returnsT extends object ? KeyValue<keyof T, T[keyof T]>[] : null

Описание

Преобразует объект или Map в массив пар «ключ-значение».

Выходной массив будет отсортирован по ключам. По умолчанию для сравнения используется значение кодовой точки Unicode. При необходимости можно передать compareFn, если ваши ключи являются сложными типами. Передача null в качестве compareFn позволит использовать естественный порядок элементов входных данных.

Экспортируется из

CommonModule

Примечания по использованию

Примеры

В этом примере показано, как перебирать объект или Map с помощью ngFor, используя канал keyvalue.

@Component({
  selector: 'keyvalue-pipe',
  imports: [KeyValuePipe],
  template: ` <span>
    <p>Object</p>
    @for (item of object | keyvalue; track item.key) {
      <div>{{ item.key }}:{{ item.value }}</div>
    }
    <p>Map</p>
    @for (item of map | keyvalue; track item.key) {
      <div>{{ item.key }}:{{ item.value }}</div>
    }
    <p>Natural order</p>
    @for (item of map | keyvalue: null; track item.key) {
      <div>{{ item.key }}:{{ item.value }}</div>
    }
  </span>`,
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([
    [2, 'foo'],
    [1, 'bar'],
  ]);
}