키를 문자열로 포함하고 값을 맵 반복으로 포함하는 ngFor 루프 맵을 사용하여 반복하는 방법

저는 앵귤러 5를 처음 접했고 타이프 스크립트에 다른 맵을 포함하는 맵을 반복하려고합니다. 아래 각도에서 이러한 종류의 맵을 반복하는 방법은 구성 요소에 대한 코드입니다.

import { Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map = new Map<String, Map<String,String>>();
  map1 = new Map<String, String>();

  constructor() { 


  }

  ngOnInit() {
    this.map1.set("sss","sss");
    this.map1.set("aaa","sss");
    this.map1.set("sass","sss");
    this.map1.set("xxx","sss");
    this.map1.set("ss","sss");


    this.map1.forEach((value: string, key: string) => {
      console.log(key, value);

    });


    this.map.set("yoyoy",this.map1);

  }



}

템플릿 html은 다음과 같습니다.

<ul>
  <li *ngFor="let recipient of map.keys()">
    {{recipient}}
   </li>


</ul>

<div>{{map.size}}</div>

Angular 6.1+의 경우 기본 파이프를 사용할 수 있습니다 keyvalue( Do review and upvote also ) :

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

작업 데모

이전 버전의 경우 :

이 한 가지 간단한 해결책은 배열로 변환 맵입니다 : Array.from

구성 요소 측면 :

map = new Map<String, String>();

constructor(){
    this.map.set("sss","sss");
    this.map.set("aaa","sss");
    this.map.set("sass","sss");
    this.map.set("xxx","sss");
    this.map.set("ss","sss");
    this.map.forEach((value: string, key: string) => {
        console.log(key, value);
    });
}

getKeys(map){
    return Array.from(map.keys());
}

템플릿면 :

<ul>
  <li *ngFor="let recipient of getKeys(map)">
    {{recipient}}
   </li>
</ul>

작업 데모

Angular 6.1 이상을 사용하는 경우 가장 편리한 방법은 KeyValuePipe 를 사용하는 것입니다.

   @Component({
      selector: 'keyvalue-pipe',
      template: `<span>
        <p>Object</p>
        <div *ngFor="let item of object | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
        <p>Map</p>
        <div *ngFor="let item of map | keyvalue">
          {{item.key}}:{{item.value}}
        </div>
      </span>`
    })
    export class KeyValuePipeComponent {
      object: Record<number, string> = {2: 'foo', 1: 'bar'};
      map = new Map([[2, 'foo'], [1, 'bar']]);
    }

편집하다

각도 6.1 이상에서는 Londeren에서 제안한대로 KeyValuePipe 를 사용하십시오 .

Angular 6.0 이상

더 쉽게하기 위해 파이프를 만들 수 있습니다.

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

@Pipe({name: 'getValues'})
export class GetValuesPipe implements PipeTransform {
    transform(map: Map<any, any>): any[] {
        let ret = [];

        map.forEach((val, key) => {
            ret.push({
                key: key,
                val: val
            });
        });

        return ret;
    }
}

 <li *ngFor="let recipient of map |getValues">

순수하기 때문에 모든 변경 감지에서 트리거되지는 않지만 map변수에 대한 참조가 변경 되는 경우에만 트리거 됩니다.

Stackblitz 데모

이는 map.keys()반복자를 반환 하기 때문 입니다. *ngFor반복자와 함께 작동 할 수 있지만는 map.keys()모든 변경 감지주기에서 호출되므로 배열에 대한 새 참조가 생성되어 오류가 발생합니다. 그건 그렇고, 이것은 당신이 전통적으로 생각하는 것처럼 항상 오류 가 아닙니다 . 기능을 손상시키지 않을 수도 있지만 미친 방식으로 작동하는 것처럼 보이는 데이터 모델이 있음을 시사합니다. 변경 감지기가 값을 확인하는 것보다 빠르게 변경됩니다.

구성 요소에서 맵을 배열로 변환하지 않으려면 주석에 제안 된 파이프를 사용할 수 있습니다. 보이는 것처럼 다른 해결 방법은 없습니다.

PS이 오류는 실제 오류가 아닌 매우 엄격한 경고와 비슷하기 때문에 프로덕션 모드에서는 표시되지 않지만 여전히 그대로 두는 것은 좋지 않습니다.

사람들이 주석에서 언급했듯이 키 값 파이프는 삽입 순서를 유지하지 않습니다 (Map의 주요 목적).

어쨌든 Map 객체가 있고 순서를 유지하려는 경우 가장 깔끔한 방법은 items () 함수입니다.

<ul>
    <li *ngFor="let item of map.entries()">
        <span>key: {{item[0]}}</span>
        <span>value: {{item[1]}}</span>
    </li>
</ul>

아래 코드는 지도 게재 신청서 에 표시하는 데 유용합니다 .

<ul>
    <li *ngFor="let recipient of map | keyvalue: asIsOrder">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

.ts 파일 은 아래 코드를 추가합니다.

asIsOrder(a, b) {
    return 1;
}