कोणीय में वस्तु पर Iterate

Question

मैं कोणीय 2 अल्फा 28 में कुछ चीजें करने की कोशिश कर रहा हूं, और शब्दकोशों और NgFor के साथ एक मुद्दा रहा हूं।

मैं इस तरह देख टाइपस्क्रिप्ट में एक इंटरफ़ेस है:

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>

सभी मामलों में मुझे "अनपेक्षित टोकन" जैसी त्रुटि मिलती है या "ऑब्जेक्ट को समर्थन करने वाली 'iterableDiff' नहीं मिल सकती है"

मुझे यहां क्या समझ नहीं आ रहा है? क्या यह अब संभव नहीं है? (पहला सिंटैक्स Angular 1.x में काम करता है) या किसी ऑब्जेक्ट पर पुनरावृत्ति के लिए सिंटैक्स अलग है?

Comments

एक "शब्दकोश" क्या है? मैंने उस शब्द को जावास्क्रिप्ट, कोणीय या टाइपस्क्रिप्ट संदर्भ में कभी नहीं देखा या सुना है। Y

डिक्शनरी का मतलब एक ऐसा नक्शा है जो मुझे लगता है, जेएस संदर्भ में इस शब्द का इस्तेमाल बिल्कुल भी नहीं किया गया है, लेकिन पायथन या रूबी में इसका इस्तेमाल किया गया है।

— सीजर जूनियर रोड्रिगेज

मुझे लगता है कि अब इस सवाल का सही जवाब है।

— यहोशू Kissoon

कृपया सही उत्तर को बेहतर तरीके से चिह्नित करें। bersling सही है

— Activedecay

Answer 1

ऐसा लगता है कि वे एनजी 1 से वाक्य रचना का समर्थन नहीं करना चाहते हैं।

मिश्को हेवरी ( संदर्भ ) के अनुसार :

नक्शों की चाबियों में कोई आदेश नहीं है और इसलिए वे पुनरावृत्ति अप्रत्याशित हैं। यह ng1 में समर्थित था, लेकिन हमें लगता है कि यह एक गलती थी और NG2 में इसका समर्थन नहीं किया जाएगा

योजना के लिए एक MapToIterable पाइप होना चाहिए

<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? कोई विचार क्यों?

— परदीप जैन

हाँ यह मेरे लिए भी हो रहा है। और अगर मैं @ अश्लील समाधान भी उपयोग करता हूं।

— user2294382

कृपया बर्सलिंग के उत्तर को देखें क्योंकि नवीनतम कोणीय 7 पर एक तुच्छ समाधान है

— एक्टेडेके

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

Stackblitz: https://stackblitz.com/edit/angular-iterate-key-value

आपको इसे किसी भी मॉड्यूल में पंजीकृत करने की आवश्यकता नहीं होगी, क्योंकि कोणीय पाइप किसी भी टेम्पलेट में बॉक्स से बाहर काम करते हैं।

यह जावास्क्रिप्ट-मैप्स के लिए भी काम करता है ।

Comments

आपको implements PipeTransformकक्षा की परिभाषा में जोड़ना चाहिए (देखें angular.io/guide/pipes#custom-pipes )

— toioski

@toioski धन्यवाद, मैंने इसे जोड़ा है और लूप के लिए नए सिंटैक्स में अपडेट किया है।

— bersling

महान जवाब, यह मेरे शब्दकोश ngFor के लिए इस्तेमाल किया। मुझे keyValuePair.val करना था [0] हालांकि मेरे मूल्य समाप्त हो गए [{}] और नहीं {}

— jhhoff02

वहाँ सिर्फ इस पर एक फायदा है return Object.keys(dict).map(key => ({key, val: dict[key]}))?

— जस्टिन मॉर्गन

मुझे कोई दिखाई नहीं देता, वास्तव में मैं आपके रास्ते का उपयोग करूंगा!

— बोरिंग

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 का उपयोग करने के बाद इसकी अभिव्यक्ति बदल गई है"। कोई विचार?

— user2294382

क्योंकि शुद्ध: असत्य एक परिवर्तन का पता लगाने के लिए आवश्यक है इंजेक्शन लगाने के लिए इंजेक्शन

— Judson Terrell

इसे अशुद्ध करने के लिए सेटिंग क्यों?

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

— 1910 में sib10

आपके मानचित्र फ़ंक्शन के अंदर कोड को सरल बनाया जा सकता है: return { 'key' : key, 'value' : value[key] };

— Makotosan

Answer 5

अपडेट किया गया: अब कोणीय ऑब्जेक्ट को json ऑब्जेक्ट के माध्यम से lopping के लिए पाइप प्रदान कर रहा है 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इससे मेरी समस्या हल हो गई।

— सिलम्बरासन RD

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

— iRaS

@iRaS अच्छा बिंदु। मैंने अपना उत्तर अपडेट कर दिया है। मैं भी अशक्त के बजाय अपरिभाषित लौटता हूं।

— फ्रेडरिक अलुंड

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तत्काल प्रतिबिंब के लिए वास्तव में महत्वपूर्ण है।

— फितरत कृष्ण

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 क्वेरी / एपि कॉल के रूप में उपयोग करता हूं। मुझे यकीन नहीं है कि जहां मैं गलत हो रहा था, मुझे लगता है कि मैं दिनों के लिए उत्तर का चक्कर लगा रहा हूं, जैसे विभिन्न त्रुटि कोड का पीछा करना:

"ऑब्जेक्ट को समर्थन करने वाली 'iterableDiff' नहीं मिल सकती है"

"जेनेरिक टाइप एरे को एक तर्क की आवश्यकता है"

JSON ने त्रुटियों को पार्स किया, और दूसरों को सुनिश्चित किया

मुझे लगता है मैं सिर्फ फिक्स का गलत संयोजन था।

इसलिए यहाँ गोच और चीज़ों का सारांश देखने लायक है।

सबसे पहले अपने एपीआई कॉल के परिणाम की जांच करें, आपके परिणाम ऑब्जेक्ट, सरणी, या ऑब्जेक्ट की एक सरणी के रूप में हो सकते हैं।

मैं इसे बहुत अधिक में नहीं जाना चाहता, ओपी की मूल त्रुटि कहने के लिए पर्याप्त नहीं होने के कारण यह आमतौर पर एक वस्तु को पुनरावृत्त करने की कोशिश के कारण होता है, न कि एक ऐरे के रूप में।

मेरे कुछ डिबगिंग परिणामों के एरे और ऑब्जेक्ट दोनों के चर दिखाते हैं

तो जैसा कि हम आम तौर पर अपने JSON परिणाम पर पुनरावृति करना चाहते हैं, हमें यह सुनिश्चित करने की आवश्यकता है कि यह एक ऐरे के रूप में हो। मैंने कई उदाहरणों की कोशिश की, और शायद मुझे पता है कि अब मुझे पता है कि उनमें से कुछ वास्तव में काम करेंगे, लेकिन मैं जिस दृष्टिकोण के साथ गया था वह वास्तव में एक पाइप को लागू करने के लिए था और जिस कोड का मैंने इस्तेमाल किया था वह t.888 द्वारा पोस्ट किया गया था

   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;

ईमानदारी से मुझे लगता है कि मुझे जो चीजें मिल रही थीं, उनमें से एक त्रुटि से निपटने की कमी थी, 'वापसी अपरिभाषित' कॉल जोड़कर मुझे विश्वास है कि हम अब गैर-अपेक्षित डेटा को पाइप पर भेजने की अनुमति दे रहे हैं, जो स्पष्ट रूप से मेरे मामले में हो रहा था ।

यदि आप पाइप से तर्क से निपटना नहीं चाहते (और देखो मुझे नहीं लगता कि यह ज्यादातर मामलों में आवश्यक है) तो आप निम्नलिखित को वापस कर सकते हैं

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

आपके पाइप और पृष्ठ या घटक बनाने पर कुछ नोट्स जो उस पाइप का उपयोग करते हैं

क्या मुझे 'name_of_my_pipe' के बारे में त्रुटियाँ प्राप्त हो रही थीं, जो नहीं मिल रही हैं

CLI से I आयनिक उत्पन्न पाइप ’कमांड का उपयोग यह सुनिश्चित करने के लिए करें कि पाइप मॉड्यूलेट बनाए गए हैं और सही ढंग से संदर्भित हैं। सुनिश्चित करें कि आप mypage.module.ts पेज पर निम्नलिखित जोड़ सकते हैं।

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

(यह निश्चित नहीं है कि यदि यह परिवर्तन आपके स्वयं के custom_module का है, तो आपको इसे custommodule.module.ts में भी जोड़ना पड़ सकता है)

यदि आपने अपना पेज बनाने के लिए 'आयनिक जनरेट पेज' कमांड का उपयोग किया है, लेकिन उस पेज को अपने मुख्य पृष्ठ के रूप में उपयोग करने का निर्णय लेते हैं, तो app.module.ts (यहां एक और जवाब जो मैंने पोस्ट किया है, उस https से संबंधित पोस्ट को हटाने के लिए याद रखें : / /forum.ionicframework.com/t/solved-pipe-not-found-in-custom-component/95179/13?u=dreaser

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

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

एपीआई कॉल करने के लिए ऐसा लगता है कि आपको HttpModule को app.module.ts में आयात करने की आवश्यकता है

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

और आपको उस पृष्ठ में Http की आवश्यकता है जिससे आप कॉल करते हैं

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'];

(यह निश्चित नहीं है कि उस चर को एक ऐरे स्ट्रिंग होना चाहिए, लेकिन मेरे पास अभी जो है वह है। यह अधिक सामान्य चर के रूप में काम कर सकता है)

और अंतिम नोट, इनबिल्ट JSON लाइब्रेरी का उपयोग करना आवश्यक नहीं था, लेकिन आप इन 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

यह सच नहीं है, संत। टाइप स्क्रिप्ट आपको क्लीनर कोड लिखने के लिए मजबूर करती है। इसकी अमूर्त कक्षाओं के लिए बहुत आसान है। जो आपके पास नहीं है। C ++ कुछ asm के लिए संकलित करता है - asm का कोई वर्ग या प्रकार भी नहीं है, फिर भी आप अलग-अलग c ++ लिखते हैं और फिर ur asm कोड: P

— YAMM

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और लागू PipeTransform :

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

तो बस अपने HTML में पाइप का उपयोग करें *ngFor:

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

याद रखें, आपको उस पाइप में अपने पाइपसमूले को घोषित करना होगा जहां आप पाइप का उपयोग करना चाहते हैं:

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

Answer 17

इसलिए मैं अपने स्वयं के सहायक कार्य, objLength (obj) को लागू करने जा रहा था, जो सिर्फ ऑब्जेक्ट (obj) .keys.length वापस करता है। लेकिन तब जब मैं इसे अपने टेम्पलेट * ngIf फ़ंक्शन में शामिल कर रहा था, तो मेरे IDE ने objectKeys () का सुझाव दिया। मैंने इसे आजमाया और यह काम आया। इसकी घोषणा के बाद, यह 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>