Cara melakukan iterasi menggunakan ngFor loop Map yang berisi kunci sebagai string dan nilai sebagai iterasi peta

Saya baru mengenal sudut 5 dan mencoba mengulang peta yang berisi peta lain dalam skrip ketikan. Cara mengiterasi di bawah peta semacam ini dengan sudut di bawah ini adalah kode untuk komponen:

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

  }



}

dan template html-nya adalah:

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


</ul>

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

Untuk Angular 6.1+ , Anda dapat menggunakan pipa default keyvalue( Lakukan review dan upvote juga ):

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

DEMO KERJA

Untuk versi sebelumnya:

Salah satu solusi sederhana untuk ini adalah mengonversi peta menjadi array: Array.from

Komponen Sisi:

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

Sisi Template:

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

DEMO KERJA

Jika Anda menggunakan Angular 6.1 atau yang lebih baru, cara yang paling nyaman adalah menggunakan 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']]);
    }

Sunting

Untuk angular 6.1 dan yang lebih baru, gunakan KeyValuePipe seperti yang disarankan oleh Londeren.

Untuk sudut 6.0 dan lebih tua

Untuk mempermudah, Anda bisa membuat pipa.

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

Karena murni, itu tidak akan dipicu pada setiap deteksi perubahan, tetapi hanya jika referensi ke mapvariabel berubah

Demo Stackblitz

Ini karena map.keys()mengembalikan iterator. *ngFordapat bekerja dengan iterator, tetapi map.keys()akan dipanggil pada setiap siklus deteksi perubahan, sehingga menghasilkan referensi baru ke larik, menghasilkan kesalahan yang Anda lihat. Ngomong-ngomong, ini tidak selalu merupakan kesalahan seperti yang biasanya Anda pikirkan; bahkan mungkin tidak merusak fungsionalitas Anda, tetapi menunjukkan bahwa Anda memiliki model data yang tampaknya berperilaku gila - berubah lebih cepat daripada detektor perubahan memeriksa nilainya.

Jika Anda tidak ingin mengubah peta menjadi array dalam komponen Anda, Anda dapat menggunakan pipa yang disarankan di komentar. Sepertinya tidak ada solusi lain.

PS Kesalahan ini tidak akan ditampilkan dalam mode produksi, karena ini lebih seperti peringatan yang sangat ketat, daripada kesalahan sebenarnya, tetapi tetap saja, ini bukan ide yang baik untuk membiarkannya.

Seperti yang telah disebutkan orang dalam komentar keyvalue pipe tidak mempertahankan urutan penyisipan (yang merupakan tujuan utama dari Map).

Bagaimanapun, terlihat seperti jika Anda memiliki objek Map dan ingin mempertahankan urutannya, cara terbersih untuk melakukannya adalah fungsi entries ():

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

Kode di bawah ini berguna untuk ditampilkan dalam urutan penyisipan peta .

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

File .ts tambahkan kode di bawah ini.

asIsOrder(a, b) {
    return 1;
}