NgFor लूप का उपयोग करके पुनरावृति कैसे करें मैप स्ट्रिंग के रूप में कुंजी और मान के रूप में मैप करें

Question 1

मैं कोणीय 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>

Question 2

कोणीय 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>

काम कर रहा डेमो

Question 3

यदि आप 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']]);
    }

Question 4

संपादित करें

कोणीय 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परिवर्तन चर का संदर्भ

स्टैकब्लिट्ज़ डेमो

Question 5

ऐसा इसलिए है क्योंकि map.keys()एक पुनरावृत्ति रिटर्न। *ngForपुनरावृत्तियों के साथ काम कर सकते हैं, लेकिन map.keys()हर परिवर्तन का पता लगाने के चक्र पर बुलाया जाएगा, इस प्रकार सरणी के लिए एक नया संदर्भ उत्पन्न होता है, जिसके परिणामस्वरूप त्रुटि दिखाई देती है। वैसे, यह हमेशा एक त्रुटि नहीं है क्योंकि आप पारंपरिक रूप से इसके बारे में सोचेंगे; यह आपकी किसी भी कार्यक्षमता को नहीं तोड़ सकता है, लेकिन यह बताता है कि आपके पास एक डेटा मॉडल है जो एक पागल तरीके से व्यवहार करता है - परिवर्तन डिटेक्टर की तुलना में तेजी से बदलते हुए इसके मूल्य की जांच करता है।

यदि आप अपने घटक में मानचित्र को किसी सरणी में बदलना नहीं चाहते हैं, तो आप टिप्पणियों में सुझाए गए पाइप का उपयोग कर सकते हैं। कोई अन्य समाधान नहीं है, जैसा कि लगता है।

पुनश्च यह त्रुटि उत्पादन मोड में नहीं दिखाई जाएगी, क्योंकि यह वास्तविक त्रुटि के बजाय एक बहुत सख्त चेतावनी की तरह है, लेकिन फिर भी, इसे छोड़ने का यह एक अच्छा विचार नहीं है।

Question 6

जैसा कि लोगों ने टिप्पणियों में उल्लेख किया है किवैल्यू पाइप सम्मिलन के क्रम को बरकरार नहीं रखता है (जो कि मानचित्र का प्राथमिक उद्देश्य है)।

किसी भी तरह, ऐसा लगता है जैसे कि आपके पास एक मैप ऑब्जेक्ट है और ऑर्डर को संरक्षित करना चाहते हैं, ऐसा करने का सबसे साफ तरीका है प्रविष्टियां () फ़ंक्शन:

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

Question 7

मानचित्र प्रविष्टि क्रम में प्रदर्शित करने के लिए नीचे दिया गया उपयोगी कोड ।

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

.ts फ़ाइल नीचे कोड जोड़ें।

asIsOrder(a, b) {
    return 1;
}