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

키를 문자열로 포함하고 값을 맵 반복으로 포함하는 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( 도 검토하십시오 ).

<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">

As it it pure, it will not be triggered on every change detection, but only if the reference to the map variable changes

Stackblitz demo

---

This is because map.keys() returns an iterator. *ngFor can work with iterators, but the map.keys() will be called on every change detection cycle, thus producing a new reference to the array, resulting in the error you see. By the way, this is not always an error as you would traditionally think of it; it may even not break any of your functionality, but suggests that you have a data model which seems to behave in an insane way - changing faster than the change detector checks its value.

If you do no want to convert the map to an array in your component, you may use the pipe suggested in the comments. There is no other workaround, as it seems.

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

참조 URL : https://stackoverflow.com/questions/48187362/how-to-iterate-using-ngfor-loop-map-tained-key-as-string-and-values-as-map-i