স্ট্রিং হিসাবে কী এবং মানচিত্রের পুনরাবৃত্তির মান হিসাবে এনজিফোর্ড লুপ ম্যাপ ব্যবহার করে কীভাবে পুনরাবৃত্তি করা যায়

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

  }



}

এবং এর টেম্পলেটটি এইচটিএমএল:

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

ওয়ার্কিং ডেমো

পূর্ববর্তী সংস্করণের জন্য:

এর একটি সহজ সমাধান হ'ল মানচিত্রকে অ্যারেতে রূপান্তর করা: অ্যারে.ফর্ম

উপাদান সাইড:

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

আপনি যদি কৌণিক 6.1 বা তার পরে ব্যবহার করছেন তবে সর্বাধিক সুবিধাজনক উপায় হ'ল কীভ্যালু পাইপ ব্যবহার করা

   @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 এবং আরও নবীনতার জন্য, লন্ডেনের পরামর্শ অনুসারে কীভ্যালু পাইপ ব্যবহার করুন ।

কৌণিক 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()করতে পারে তবে প্রতিটি পরিবর্তন সনাক্তকরণ চক্রের উপর কল করা হবে, সুতরাং অ্যারের ক্ষেত্রে একটি নতুন রেফারেন্স তৈরি করা হবে, ফলস্বরূপ আপনি যে ত্রুটি দেখছেন তার ফলস্বরূপ। যাইহোক, এটি সর্বদা একটি ত্রুটি নয় কারণ আপনি traditionতিহ্যগতভাবে এটি সম্পর্কে ভাবেন; এটি এমনকি আপনার কোনও কার্যকারিতা ভঙ্গ করতে পারে না, তবে পরামর্শ দেয় যে আপনার কাছে এমন একটি ডেটা মডেল রয়েছে যা মনে হয় একটি উন্মাদ উপায়ে আচরণ করে - পরিবর্তন ডিটেক্টরের চেয়ে দ্রুত পরিবর্তন করে এর মানটি পরীক্ষা করে।

আপনি যদি নিজের উপাদানগুলিতে মানচিত্রটিকে কোনও অ্যারে রূপান্তর করতে চান না, আপনি মন্তব্যগুলিতে প্রস্তাবিত পাইপটি ব্যবহার করতে পারেন। এটির মতো আর কোনও কার্যকরী নেই।

পিএস এই ত্রুটিটি উত্পাদন মোডে দেখানো হবে না, কারণ এটি সত্যিকারের ত্রুটির চেয়ে অনেক বেশি কঠোর সতর্কতার মতো, তবে তবুও, এটি ছেড়ে দেওয়া ভাল ধারণা নয়।

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