কৌণিকের উপর ওভার অবজেক্ট আইট্রেট করুন

Question

আমি কৌণিক 2 আলফা 28 তে কিছু করার চেষ্টা করছি এবং অভিধান এবং এনজিফোর্ড নিয়ে একটি সমস্যা রয়েছে।

আমার কাছে টাইপস্ক্রিপ্টটিতে এমন ইন্টারফেস রয়েছে যা দেখতে দেখতে:

interface Dictionary {
    [ index: string ]: string
}

জাভাস্ক্রিপ্টে এটি এমন কোনও সামগ্রীতে অনুবাদ করবে যা ডেটা সহ এই জাতীয় দেখায়:

myDict={'key1':'value1','key2':'value2'}

আমি এটির উপর পুনরাবৃত্তি করতে চাই এবং এটি ব্যবহার করে দেখতে চাই:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>

তবে কোনও ফলসই হয়নি, নীচের কোনওটিই কাজ করেননি:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>

সব ক্ষেত্রেই আমি "অপ্রত্যাশিত টোকেন" বা "পুনরাবৃত্তিযোগ্য ডিফ" পাইপ সমর্থনকারী অবজেক্টটি পাই না "এর মতো ত্রুটিগুলি পাই

আমি এখানে কি মিস করছি? এটা কি আর সম্ভব নয়? (প্রথম বাক্য গঠনটি কৌণিক 1.x এ কাজ করে) বা কোনও বস্তুর উপরে পুনরাবৃত্তির জন্য সিনট্যাক্সটি আলাদা?

Comments

একটি "অভিধান" কি? আমি জাভা স্ক্রিপ্ট, কৌণিক বা টাইপস্ক্রিপ্ট প্রসঙ্গে কখনও এই শব্দটি দেখিনি বা শুনে নি। Y

অভিধানের অর্থ একটি মানচিত্র যা আমি মনে করি, শব্দটি জেএস প্রসঙ্গে মোটেই ব্যবহৃত হয় না তবে পাইথন বা রুবিতে এটি ব্যবহৃত হয়।

— সিজার জুনিয়র রদ্রিগেজ

আমি মনে করি @ বিস্মৃত উত্তর এখন এই প্রশ্নের সঠিক উত্তর।

— জোশুয়া কিসুন

সঠিক উত্তরটি আরও ভাল করে চিহ্নিত করুন। bersling সঠিক

— activedecay

Answer 1

এটি এনজি 1 থেকে সিনট্যাক্স সমর্থন করতে চায় না বলে মনে হয়।

মিউকো হেভরি অনুসারে ( রেফারেন্স ):

কীগুলিতে মানচিত্রের কোনও অর্ডার নেই এবং তাই এগুলি পুনরাবৃত্তিটি অনাকাঙ্ক্ষিত। এটি এনজি 1 এ সমর্থিত ছিল, তবে আমরা মনে করি এটি একটি ভুল ছিল এবং এনজি 2 তে সমর্থন করা হবে না

পরিকল্পনাটিতে একটি মানচিত্রের Toteteable পাইপ আছে

<div *ngFor"var item of map | mapToIterable">

সুতরাং আপনার বস্তুর পুনরাবৃত্তি করার জন্য আপনাকে একটি "পাইপ" ব্যবহার করতে হবে। বর্তমানে এমন কোনও পাইপ প্রয়োগ করা হয়নি যা এটি করে।

কার্যকারণ হিসাবে, এখানে একটি ছোট উদাহরণ যা কীগুলি দ্বারা পুনরাবৃত্তি হয়:

উপাদান:

import {Component} from 'angular2/core';

@Component({
  selector: 'component',
  templateUrl: `
       <ul>
       <li *ngFor="#key of keys();">{{key}}:{{myDict[key]}}</li>
       </ul>
  `
})
export class Home {
  myDict : Dictionary;
  constructor() {
    this.myDict = {'key1':'value1','key2':'value2'};
  }

  keys() : Array<string> {
    return Object.keys(this.myDict);
  }
}

interface Dictionary {
    [ index: string ]: string
}

Comments

আমি keyহিসাবে numberএবং valueহিসাবে বস্তুর উপর একই চেষ্টা করছি stringকিন্তু কৌণিক ত্রুটি নিক্ষেপ করছে expression has changed after it was checked? কেন এত ধারণা?

— পারদীপ জৈন

হ্যাঁ এটি আমার জন্যও ঘটছে। এবং একই যদি আমি @ obsur এর সমাধানও ব্যবহার করি।

— ব্যবহারকারী 2294382

দয়া করে বার্সলিংয়ের উত্তরটি দেখুন কারণ সর্বশেষতম কৌণিক on

— অ্যাক্টিভডেকায়

Answer 2

কৌণিক 6.1.0+ উত্তর

keyvalueপাইপটি বিল্ট-ইন ব্যবহার করুন :

<div *ngFor="let item of myObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

বা এই মত:

<div *ngFor="let item of myObject | keyvalue:mySortingFunction">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

mySortingFunctionআপনার .tsফাইলটিতে কোথায় রয়েছে , উদাহরণস্বরূপ:

mySortingFunction = (a, b) => {
  return a.key > b.key ? -1 : 1;
}

স্ট্যাকব্লিটজ: https://stackblitz.com/edit/angular-iterate-key-value

আপনার কোনও মডিউলে এটি নিবন্ধভুক্ত করতে হবে না, যেহেতু কৌনিক পাইপগুলি কোনও টেম্পলেটের বাক্সের বাইরে কাজ করে।

এটি জাভাস্ক্রিপ্ট-মানচিত্রের জন্যও কাজ করে ।

Comments

implements PipeTransformআপনার ক্লাস সংজ্ঞাটি যুক্ত করা উচিত (দেখুন কৌণিক.ইও

— গাইড

@ টায়োস্কি ধন্যবাদ, আমি এটি যুক্ত করেছি এবং লুপের জন্য নতুন সিনট্যাক্সে আপডেট করেছি।

— বিসর্জন দিন

দুর্দান্ত উত্তর, আমার অভিধানটি এনজিফোর্ডে এটি ব্যবহার করেছে। আমাকে কীভ্যালিউপায়ার.ওয়াল করতে হয়েছিল [0] যদিও আমার মানগুলি শেষ হয়ে গেছে [{}] এবং {}

— jhhoff02

এটার কি কোনও সুবিধা আছে return Object.keys(dict).map(key => ({key, val: dict[key]}))?

— জাস্টিন মরগান

আমি কোনও দেখতে পাচ্ছি না, আসলে আমি আপনার উপায়টি ব্যবহার করব!

— 14:48

Answer 3

এই পাইপটি ব্যবহার করার চেষ্টা করুন

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

Comments

উজ্জ্বল, এবং আমি কীটির রেফারেন্স রাখতে চাইলে আমি কেবলমাত্র তার পরিবর্তে কী এবং মান উভয় দিয়ে একটি বস্তুর মানচিত্র করব। আমি আশা করি যে আমি বেশ কয়েকটি উত্তর গ্রহণযোগ্য উত্তর হিসাবে চিহ্নিত করতে পারি, যেহেতু এটিই আমার সমস্যার সমাধান, যদিও চিহ্নিত উত্তরটি আমার প্রশ্নের উত্তর।

— রিকার্ড স্টাফ

@obscur - আমি যদি এখনই উপরের কাজটি করি তবে আমি একটি ত্রুটি পেয়েছি "Angular2.beta.0.0 ব্যবহার করে" এটি পরীক্ষা করার পরে "এক্সপ্রেশনটি পরিবর্তিত হয়েছে"। কোন চিন্তা?

— ব্যবহারকারী 2294382

খাঁটি কারণ খাঁটি: মিথ্যাটির জন্য একটি পরিবর্তন সনাক্ত করা দরকার স্ট্র্যাটজি ইনজেকশনের জন্য

— জুডসন টেরেল

কেন এটি অপরিষ্কার সেট?

— tom10271

এটি আমার পক্ষে ভাল কাজ করেছে। কেবলমাত্র আমি এনজিফোর্ডে # ব্যবহার করতে পারি নি। পরিবর্তে লেট ব্যবহৃত হয়।

— মার্টিনজেএইচ

Answer 4

@ অস্পষ্টর উত্তর ছাড়াও, আপনি কীভাবে @ ভিউ keyএবং উভয় valueথেকে অ্যাক্সেস করতে পারবেন তার একটি উদাহরণ এখানে রয়েছে ।

পাইপ:

@Pipe({
   name: 'keyValueFilter'
})

export class keyValueFilterPipe {
    transform(value: any, args: any[] = null): any {

        return Object.keys(value).map(function(key) {
            let pair = {};
            let k = 'key';
            let v = 'value'


            pair[k] = key;
            pair[v] = value[key];

            return pair;
        });
    }

}

দেখুন:

<li *ngFor="let u of myObject | 
keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>

সুতরাং যদি বস্তুটি দেখতে দেখতে:

myObject = {
    Daario: Naharis,
    Victarion: Greyjoy,
    Quentyn: Ball
}

উত্পন্ন ফলাফল হবে:

প্রথম নাম: দারিও
শেষ নাম: নাহারিস

প্রথম নাম: ভিক্টোরিয়ান
শেষ নাম: গ্রেজয়

প্রথম নাম: কোয়ান্টিনের
শেষ নাম: বল

Comments

শুধুমাত্র একটি বিষয় উল্লেখ করার জন্য আপনাকে ভিউ: যেমনটি পরিবর্তন করতে হবে <li *ngFor="let u of myObject | keyValueFilter">First Name: {{u.key}} <br> Last Name: {{u.value}}</li>। আমার কাছ থেকে +1

— sib10

আপনার মানচিত্রের ক্রিয়াকলাপের কোডটি সরল করা যেতে পারে: return { 'key' : key, 'value' : value[key] };

— মাকোটোসান

Answer 5

আপডেট হয়েছে: কৌণিক এখন জেসন অবজেক্টের মাধ্যমে লপিংয়ের জন্য পাইপ সরবরাহ করছে keyvalue:

<div *ngFor="let item of myDict | keyvalue">
  {{item.key}}:{{item.value}}
</div>

ডেমো ওয়ার্কিং , এবং আরও বিশদ পড়ুন

---

পূর্বে (পুরানো সংস্করণের জন্য): এখনও অবধি আমার পাওয়া সবচেয়ে ভাল / সংক্ষিপ্ত উত্তরটি হল (কোনও অংশে পাইপ ফিল্টার বা কাস্টম ফাংশন ব্যতীত কাস্টম ফাংশন ছাড়াই)

অংশের দিক:

objectKeys = Object.keys;

টেম্পলেট দিক:

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

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

Comments

let item of myDict | keyvalueএটি আমার সমস্যার সমাধান করেছে।

— সিলামবারসন আরডি

Answer 6

সাইমনহাউজির দুর্দান্ত উত্তরে যুক্ত করা । আমি একটি সংক্ষিপ্ত সংস্করণ তৈরি করেছি যা কিছু নতুন টাইপ স্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করে। আমি বুঝতে পারি যে সাইমনহাউজির সংস্করণটি অন্তর্নিহিত বিশদগুলি ব্যাখ্যা করার জন্য ইচ্ছাকৃতভাবে ভার্ভোজ। আমি প্রারম্ভিক চেকও যুক্ত করেছি যাতে পাইপটি মিথ্যা মানগুলির জন্য কাজ করে । যেমন, মানচিত্রটি যদি হয় null।

নোট করুন যে একটি পুনরুক্তি রূপান্তর (এখানে যেমন করা হয়েছে) ব্যবহার করা আরও কার্যকর হতে পারে যেহেতু আমাদের অস্থায়ী অ্যারে (অন্যান্য উত্তরগুলির মতো করা হয়েছে) এর জন্য মেমরি বরাদ্দ করার দরকার নেই।

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'mapToIterable'
})
export class MapToIterable implements PipeTransform {
    transform(map: { [key: string]: any }, ...parameters: any[]) {
        if (!map)
            return undefined;
        return Object.keys(map)
            .map((key) => ({ 'key': key, 'value': map[key] }));
    }
}

Comments

এই থ্রেডটি পছন্দ করুন, অন্যটির উপরে একটি মন্তব্য বিল্ডিং সহ! আপনার কোডটি দেখে আমি একই জিনিসটি লিখতে

— ডেভিড

এই সমাধানে একমাত্র জিনিস: এটি বাস্তবায়ন করা উচিতPipeTransform

— আইআরএস

@ আইআরএস ভাল পয়েন্ট। আমি আমার উত্তর আপডেট করেছি। আমি শূন্যের পরিবর্তে অপরিবর্তিতও ফিরে আসি।

— ফ্রেডেরিক অ্যালুন্ড

Answer 7

উপরের কয়েকটি উত্তরের একটি বৈকল্পিকতা যা একাধিক ট্রান্সফর্মগুলি (কীভাল, কী, মান) সমর্থন করে:

import { Pipe, PipeTransform } from '@angular/core';

type Args = 'keyval'|'key'|'value';

@Pipe({
  name: 'mapToIterable',
  pure: false
})
export class MapToIterablePipe implements PipeTransform {
  transform(obj: {}, arg: Args = 'keyval') {
    return arg === 'keyval' ?
        Object.keys(obj).map(key => ({key: key, value: obj[key]})) :
      arg === 'key' ?
        Object.keys(obj) :
      arg === 'value' ?
        Object.keys(obj).map(key => obj[key]) :
      null;
  }
}

ব্যবহার

map = {
    'a': 'aee',
    'b': 'bee',
    'c': 'see'
}

<div *ngFor="let o of map | mapToIterable">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let o of map | mapToIterable:'keyval'">{{o.key}}: {{o.value}}</div>
  <div>a: aee</div>
  <div>b: bee</div>
  <div>c: see</div>

<div *ngFor="let k of map | mapToIterable:'key'">{{k}}</div>
  <div>a</div>
  <div>b</div>
  <div>c</div>

<div *ngFor="let v of map | mapToIterable:'value'">{{v}}</div>
  <div>aee</div>
  <div>bee</div>
  <div>see</div>

Comments

pure: falseতাত্ক্ষণিক প্রতিচ্ছবি জন্য সত্যিই গুরুত্বপূর্ণ।

— Fırat KÜÇÜK

Answer 8

আমার অনুরূপ সমস্যা ছিল, বস্তু এবং মানচিত্রের জন্য কিছু তৈরি হয়েছিল।

import { Pipe } from 'angular2/core.js';

/**
 * Map to Iteratble Pipe
 * 
 * It accepts Objects and [Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
 * 
 * Example:
 * 
 *  <div *ngFor="#keyValuePair of someObject | mapToIterable">
 *    key {{keyValuePair.key}} and value {{keyValuePair.value}}
 *  </div>
 * 
 */
@Pipe({ name: 'mapToIterable' })
export class MapToIterable {
  transform(value) {
    let result = [];
    
    if(value.entries) {
      for (var [key, value] of value.entries()) {
        result.push({ key, value });
      }
    } else {
      for(let key in value) {
        result.push({ key, value: value[key] });
      }
    }

    return result;
  }
}

Comments

এটি ভাল কাজ করে, টাইপস্ক্রিপ্ট ব্যতীত implements PipeTransformআপনার ক্লাস সংজ্ঞাটি যুক্ত করা উচিত

— জর্জিডাঙ্গল

Answer 9

কৌণিক 2.x এবং & কৌণিক 4.x এটি বাক্সের বাইরে সমর্থন করে না

আপনি এই দুটি পাইপটি কী বা মান দ্বারা পুনরাবৃত্তি করতে ব্যবহার করতে পারেন ।

কী পাইপ:

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({
  name: 'keys',
  pure: false
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value)
  }
}

মান পাইপ:

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({
  name: 'values',
  pure: false
})
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key])
  }
}

ব্যবহারবিধি:

let data = {key1: 'value1', key2: 'value2'}

<div *ngFor="let key of data | keys"></div>
<div *ngFor="let value of data | values"></div>

Answer 10

কেউ যদি বহুমাত্রিক বস্তুর সাথে কীভাবে কাজ করবেন তা ভাবছেন, তবে সমাধানটি এখানে।

ধরে নেওয়া যাক আমাদের পরিষেবাতে নিম্নলিখিত বিষয় রয়েছে

getChallenges() {
    var objects = {};
    objects['0'] = { 
        title: 'Angular2', 
        description : "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    };

    objects['1'] = { 
        title: 'AngularJS', 
        description : "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    };

    objects['2'] = { 
        title: 'Bootstrap',
        description : "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    };
    return objects;
}

উপাদান মধ্যে নিম্নলিখিত ফাংশন যোগ করুন

challenges;

constructor(testService : TestService){
    this.challenges = testService.getChallenges();
}
keys() : Array<string> {
    return Object.keys(this.challenges);
}

অবশেষে দেখুন নিম্নলিখিত অনুসরণ

<div *ngFor="#key of keys();">
    <h4 class="heading">{{challenges[key].title}}</h4>
    <p class="description">{{challenges[key].description}}</p>
</div>

Answer 11

আমি JSON ক্যোয়ারী / এপিআই কল ফর্মিত ডেটা পার্স এবং ব্যবহার করার চেষ্টা করে আমার চুল ছিঁড়ে ফেলছি। আমি ঠিক কোথায় ভুল করছি ঠিক জানি না, আমার মনে হয় আমি কয়েক দিন ধরে উত্তর ঘুরছি, বিভিন্ন ত্রুটি কোডগুলি অনুসরণ করে যেমন:

"'পুনরাবৃত্তিযোগ্য ডিফ' পাইপ সমর্থনকারী অবজেক্টটি খুঁজে পাওয়া যায় না"

"জেনেরিক টাইপ অ্যারের জন্য একটি যুক্তি (গুলি) প্রয়োজন"

JSON ত্রুটিগুলি পার্সিং করছে এবং অন্যরাও নিশ্চিত

আমি ধরে নিচ্ছি আমার ঠিক ঠিক সমাধানের ভুল সংমিশ্রণ ছিল।

সুতরাং এখানে গোচাছা এবং সন্ধান করার বিষয়গুলির সংক্ষিপ্তসারটি দেওয়া হল।

প্রথমে আপনার এপিআই কলগুলির ফলাফলটি পরীক্ষা করুন, আপনার ফলাফল কোনও অবজেক্ট, অ্যারে বা অবজেক্টের অ্যারে আকারে থাকতে পারে।

আমি এটি খুব বেশি goোকাতে চাই না, পর্যাপ্ত পরিমাণে না বলে ওপি'র মূল ত্রুটিটি সাধারণত আপনি কোনও অ্যারে নয়, কোনও বস্তুর পুনরাবৃত্তি করার চেষ্টা করার কারণে ঘটে।

আমার কিছু ডিবাগিং ফলাফলগুলি অ্যারে এবং অবজেক্ট উভয়ের ভেরিয়েবল দেখায় showing

সুতরাং আমরা সাধারণত আমাদের JSON ফলাফলের উপর পুনরাবৃত্তি করতে চাই আমাদের এটি নিশ্চিত করা দরকার যে এটি অ্যারের আকারে রয়েছে। আমি অসংখ্য উদাহরণ চেষ্টা করেছিলাম, এবং সম্ভবত আমি এখন যা জানি তা জেনে কিছু সত্যই কাজ করবে তবে আমি যে পদ্ধতির সাথে চলেছি তা ছিল একটি পাইপ এবং আমি যে কোডটি ব্যবহার করছিলাম তা হ'ল টি ৮৮৮ পোস্ট করেছে

   transform(obj: {[key: string]: any}, arg: string) {
if (!obj)
        return undefined;

return arg === 'keyval' ?
    Object.keys(obj).map((key) => ({ 'key': key, 'value': obj[key] })) :
  arg === 'key' ?
    Object.keys(obj) :
  arg === 'value' ?
    Object.keys(obj).map(key => obj[key]) :
  null;

সত্যই আমি মনে করি যে জিনিসগুলির মধ্যে একটি আমার কাছে ছিল তা হ'ল ত্রুটি পরিচালনার অভাব, 'রিটার্ন অপরিজ্ঞাত' কল যোগ করে আমি বিশ্বাস করি যে আমরা এখন পাইপটিতে অপ্রত্যাশিত ডেটা প্রেরণের অনুমতি দিচ্ছি যা স্পষ্টতই আমার ক্ষেত্রে ঘটছিল which ।

আপনি যদি পাইপের সাথে যুক্তি মোকাবেলা করতে না চান (এবং দেখতে বেশিরভাগ ক্ষেত্রে আমার এটি প্রয়োজন মনে হয় না) আপনি কেবল নিম্নলিখিতটি ফিরিয়ে দিতে পারেন

       if (!obj)
          return undefined;
       return Object.keys(obj);

আপনার পাইপ এবং পৃষ্ঠা বা উপাদানটি তৈরি করতে কিছু নোট যা সেই পাইপটি ব্যবহার করে

আমি কি 'name_of_my_pipe' পাওয়া যায়নি সে সম্পর্কে ত্রুটি পেয়েছি

পাইপ মডিউল.টিগুলি সঠিকভাবে তৈরি করা হয়েছে এবং সঠিকভাবে রেফারেন্স করা হয়েছে তা নিশ্চিত করতে CLI থেকে 'আয়নিক জেনারেট পাইপ' কমান্ডটি ব্যবহার করুন। নিশ্চিত করে নিন যে আপনি নিম্নলিখিতটি মাইপেজ.মডিউল.টি পৃষ্ঠায় যুক্ত করেছেন।

import { PipesModule } from ‘…/…/pipes/pipes.module’;

(আপনার নিজের নিজস্ব কাস্টম_মডিউল থাকলেও এটি পরিবর্তন হয় কিনা তা নিশ্চিত নন, আপনাকে এটি কাস্টমমডিউল.মডিউল.টসে যোগ করার প্রয়োজনও হতে পারে)

আপনি যদি নিজের পৃষ্ঠাটি তৈরি করতে 'আয়নিক উত্পন্ন পৃষ্ঠা' কমান্ডটি ব্যবহার করেন তবে সেই পৃষ্ঠাটিকে আপনার প্রধান পৃষ্ঠা হিসাবে ব্যবহার করার সিদ্ধান্ত নিয়ে থাকেন তবে অ্যাপ্লিকেশন: Module.ts থেকে পৃষ্ঠা রেফারেন্সটি সরিয়ে ফেলার কথা মনে রাখবেন (আমি এর সাথে লেনদেন করা অন্য উত্তরটি এখানে দেওয়া হয়েছে) https: /forum.ionicframework.com/t/solved-pipe-not-found-in-custom-component/95179/13?u=dreaser

আমার উত্তরগুলির সন্ধানে যেখানে এইচটিএমএল ফাইলটিতে ডেটা প্রদর্শন করার জন্য বেশ কয়েকটি উপায় রয়েছে এবং আমি পার্থক্য ব্যাখ্যা করার জন্য যথেষ্ট বুঝতে পারি না। নির্দিষ্ট পরিস্থিতিতে আপনি একে অপরের উপর ব্যবহার করা ভাল বলে মনে করতে পারেন।

            <ion-item *ngFor="let myPost of posts">
                  <img src="https://somwhereOnTheInternet/{{myPost.ImageUrl}}"/>
                  <img src="https://somwhereOnTheInternet/{{posts[myPost].ImageUrl}}"/>
                  <img [src]="'https://somwhereOnTheInternet/' + myPost.ImageUrl" />
            </ion-item>

তবে কী এমন কাজ করেছিল যা আমাকে মূল্য এবং কী উভয়ই প্রদর্শন করতে দেয়:

    <ion-list>  
      <ion-item *ngFor="let myPost of posts  | name_of_pip:'optional_Str_Varible'">

        <h2>Key Value = {{posts[myPost]}} 

        <h2>Key Name = {{myPost}} </h2>

      </ion-item>
   </ion-list>  

এপিআই কল করার জন্য দেখে মনে হচ্ছে আপনার অ্যাপ.মডিউল.টিসে এইচটিপিএমডুলি আমদানি করা দরকার

import { HttpModule } from '@angular/http';
 .
 .  
 imports: [
BrowserModule,
HttpModule,

এবং আপনি যে পৃষ্ঠা থেকে কল করছেন তাতে আপনার এইচটিটিপি দরকার

import {Http} from '@angular/http';

এপিআই কল করার সময় আপনি মনে করেন যে শিশুদের ডেটা (অ্যারের মধ্যে থাকা অবজেক্টস বা অ্যারে) 2 টি বিভিন্ন উপায়ে পেতে সক্ষম হবেন, হয় কাজ করছে বলে মনে হচ্ছে

হয় কল করার সময়

this.http.get('https://SomeWebsiteWithAPI').map(res => res.json().anyChildren.OrSubChildren).subscribe(
        myData => {

অথবা আপনি যখন আপনার স্থানীয় ভেরিয়েবলের ডেটা বরাদ্দ করেন

posts: Array<String>;    
this.posts = myData['anyChildren'];

(নিশ্চিত না যে সেই ভেরিয়েবলটি অ্যারে স্ট্রিং হওয়া দরকার কিনা, তবে আমার কাছে এটি বর্তমানে যা আছে তা তা স্থগিত করে It এটি আরও জেনেরিক ভেরিয়েবল হিসাবে কাজ করতে পারে)

এবং চূড়ান্ত দ্রষ্টব্য, ইনবিল্ট জেএসওন লাইব্রেরিটি ব্যবহার করার প্রয়োজন ছিল না তবে আপনি কোনও 2 টি কলকে কোনও বস্তু থেকে স্ট্রিং এবং তার বিপরীতে রূপান্তর করার জন্য কার্যকর ব্যবহার করতে পারেন

        var stringifiedData = JSON.stringify(this.movies);                  
        console.log("**mResults in Stringify");
        console.log(stringifiedData);

        var mResults = JSON.parse(<string>stringifiedData);
        console.log("**mResults in a JSON");
        console.log(mResults);

আমি আশা করি তথ্যের সংকলনটি কাউকে সাহায্য করবে।

Answer 12

//Get solution for ng-repeat    
//Add variable and assign with Object.key

    export class TestComponent implements OnInit{
      objectKeys = Object.keys;
      obj: object = {
        "test": "value"
        "test1": "value1"
        }
    }
    //HTML
      <div *ngFor="let key of objectKeys(obj)">
        <div>
          <div class="content">{{key}}</div>
          <div class="content">{{obj[key]}}</div>
        </div>

Answer 13

জাভাস্ক্রিপ্টে এটি এমন কোনও সামগ্রীতে অনুবাদ করবে যা ডেটা সহ এই জাতীয় দেখায়

টাইপস্ক্রিপ্টের ইন্টারফেসগুলি একটি ডেভ টাইম কনস্ট্রাক্ট (নিখুঁতভাবে সরঞ্জামদানের জন্য ... 0 রানটাইম প্রভাব)। আপনার জাভাস্ক্রিপ্টের মতো একই টাইপস্ক্রিপ্ট লিখতে হবে।

Comments

এটা সত্য নয়, সরি। টাইপ স্ক্রিপ্ট আপনাকে ক্লিনার কোড লিখতে বাধ্য করে। এটি বিমূর্ত শ্রেণিতে অনেক সহজ। যা আপনার কাছে কেবল নেই। সি ++ কিছু asm সংকলন করে - asm এর কোন ক্লাস বা এমনকি প্রকার নেই, তবুও আপনি বিভিন্ন সি ++ লিখে আপনার

— এসএম কোডটি লিখেছেন

Answer 14

অভিধানটি একটি বস্তু, অ্যারে নয়। আমি বিশ্বাস করি এনজি-রিপিটের জন্য কৌণিক 2 এ একটি অ্যারের প্রয়োজন।

সবচেয়ে সহজ সমাধান হ'ল একটি পাইপ / ফিল্টার তৈরি করা যা বস্তুকে ফ্লাইয়ের অ্যারেতে রূপান্তরিত করে। এটি বলেছিল, আপনি সম্ভবত @basarat যেমন বলেছেন তেমন একটি অ্যারে ব্যবহার করতে চান।

Answer 15

আপনি যদি es6-shimঅথবা আপনার tsconfig.jsonলক্ষ্য es6, আপনি ES6 ব্যবহার করতে পারে ম্যাপ এটা করা।

var myDict = new Map();
myDict.set('key1','value1');
myDict.set('key2','value2');

<div *ngFor="let keyVal of myDict.entries()">
    key:{{keyVal[0]}}, val:{{keyVal[1]}}
</div>

Answer 16

পাইপ ট্রান্সফর্মটি সংজ্ঞায়িত করুন MapValuesPipeএবং বাস্তবায়ন করুন :

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'mapValuesPipe'})
export class MapValuesPipe implements PipeTransform {
    transform(value: any, args?: any[]): Object[] {
        let mArray: 
        value.forEach((key, val) => {
            mArray.push({
                mKey: key,
                mValue: val
            });
        });

        return mArray;
    }
}

আপনার পাইপ মডিউলে আপনার পাইপ যুক্ত করুন। আপনার যদি একাধিক উপাদানগুলিতে একই পাইপ ব্যবহার করতে হয় তবে এটি গুরুত্বপূর্ণ :

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    ...
    MapValuesPipe
  ],
  declarations: [..., MapValuesPipe, ...]
})
export class PipesAggrModule {}

তারপরে কেবল আপনার এইচটিএমএলে পাইপটি এতে ব্যবহার করুন *ngFor:

<tr *ngFor="let attribute of mMap | mapValuesPipe">

মনে রাখবেন, আপনি যে পাইপটি ব্যবহার করতে চান সেই উপাদানটিতে আপনাকে আপনার পাইপস মডুল্যটি ঘোষণা করতে হবে:

@NgModule({
  imports: [
    CommonModule,
    PipesAggrModule
  ],
...
}
export class MyModule {}

Answer 17

সুতরাং আমি আমার নিজের সহায়ক ফাংশন, প্রজেক্ট লেন্থ (ওজেক্ট) বাস্তবায়ন করতে যাচ্ছি যা কেবলমাত্র অবজেক্ট (আপত্তি) .keys.length প্রদান করে। তবে তারপরে যখন আমি এটিকে আমার টেম্পলেট * এনজিআই ফাংশনে যুক্ত করছিলাম তখন আমার আইডিই অবজেক্টকিজ () পরামর্শ দিয়েছে। আমি এটা চেস্টা করেছিলাম এবং এটা কাজও করেছিল. এটির ঘোষণার পরে, এটি lib.es5.d.ts দ্বারা দেওয়া হবে বলে মনে হয়, তাই আপনি সেখানে যান!

আমি এটি কীভাবে বাস্তবায়ন করেছি তা এখানে রয়েছে (আমার একটি কাস্টম অবজেক্ট রয়েছে যা আমি যে ফাইলগুলি আপলোড করেছি তার সূচক হিসাবে সার্ভার-সাইড উত্পন্ন কীগুলি ব্যবহার করে):

        <div *ngIf="fileList !== undefined && objectKeys(fileList).length > 0">
          <h6>Attached Files</h6>
          <table cellpadding="0" cellspacing="0">
            <tr *ngFor="let file of fileList | keyvalue">
              <td><a href="#">{{file.value['fileName']}}</a></td>
              <td class="actions">
                <a title="Delete File" (click)="deleteAFile(file.key);">
                </a>
              </td>
            </tr>
          </table>
        </div>