Як виконати ітерацію за допомогою карти циклу ngFor, що містить ключ як рядок та значення як ітерацію карти

Я новачок у кутовому 5 і намагаюся повторити карту, що містить іншу карту в машинописі. Як виконати ітерацію нижче цього виду карти в angular внизу - це код компонента:

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 та новіших версій використовуйте KeyValuePipe, як запропонував Лондерен.

Для кутових 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 Ця помилка не буде відображатися у виробничому режимі, оскільки вона швидше нагадує дуже суворе попередження, а не фактичну помилку, але все ж це не гарна ідея залишати це.

Як люди вже згадували в коментарях keyvalue pipe не зберігає порядок вставки (що є основною метою Map).

У будь-якому випадку, схоже, якщо у вас є об’єкт Map і ви хочете зберегти порядок, найпростіший спосіб це зробити - це функція entries ():

<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;
}