@angular/common

KeyValuePipe

파이프

안정화

비순수

Transforms Object or Map into an array of key value pairs.

파이프 사용법

{{ value_expression | keyvalue:compareFn }}

API

    
      class KeyValuePipe implements PipeTransform {
}

constructor

KeyValuePipe

@paramdiffersKeyValueDiffers

@returnsKeyValuePipe

transform

8 overloads

@paraminputReadonlyMap<K, V>

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

@returnsKeyValue<K, V>[]

@paraminputRecord<K, V> | ReadonlyMap<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>[]

@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> | ReadonlyMap<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

@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

설명

Transforms Object or Map into an array of key value pairs.

The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types. Passing null as the compareFn will use natural ordering of the input.

다음 모듈에서 내보냄

CommonModule

사용 시 참고사항

Examples

This examples show how an Object or a Map can be iterated by ngFor with the use of this keyvalue pipe.

@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'],
  ]);
}