* ngFor का उपयोग करके ऑब्जेक्ट की पहुंच कुंजी और मूल्य

Question

मैं थोड़ा कैसे प्राप्त करने के बारे में भ्रमित कर रहा हूँ keyऔर valueका उपयोग करते समय angular2 में एक वस्तु का *ngForवस्तु पर पुनरावृत्ति के लिए। मुझे पता है कि कोणीय 1.x में एक वाक्यविन्यास है जैसे

ng-repeat="(key, value) in demo"

लेकिन मुझे नहीं पता कि कैसे कोणीय 2 में भी ऐसा ही करना है। मैंने कुछ ऐसा ही प्रयास किया है, बिना सफलता के:

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'}, {'key12':'value12'}],
    'key2': [{'key21':'value21'}, {'key22':'value22'}],
  }

यहाँ मेरी कोशिश के साथ एक plnkr है: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

मैं कैसे प्राप्त key1और key2गतिशील रूप से उपयोग कर सकता हूं *ngFor? बड़े पैमाने पर खोज करने के बाद, मुझे पाइप का उपयोग करने का विचार मिला लेकिन मुझे नहीं पता कि इसके बारे में कैसे जाना जाए। क्या कोणीय 2 में भी ऐसा करने के लिए कोई इनबिल्ट पाइप है?

Comments

वर्तमान key, valueमें angular2 में युग्म युग्म प्रकार का समर्थन नहीं है ngFor, आपको इस उत्तर

— पंकज पारकर

@PankajParkar हाँ पहले ही इस जवाब को पढ़ लें। अब के लिए कोई वैकल्पिक?

— परदीप जैन

@ प्रदीप मुझे अब इसके लिए कोई और रास्ता नहीं सूझ रहा है, आपको इसके लिए खुद Pipeको तैयार करना चाहिए ..

— पंकज पारकर

हम्म लेकिन मुझे नहीं पता कि उसी के लिए पाइप कैसे बनाया जाए।

— परदीप जैन

@ प्रदीप उत्तर जो मैंने आपको संदर्भ के लिए दिया था, उस कार्यान्वयन का है। उन्हें काम करना चाहिए ..

— पंकज पारकर

Answer 1

है Object.keysटेम्पलेट में सुलभ और उस में का उपयोग *ngFor।

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`
})

export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
}

Comments

@PardeepJain यह एक ES5 विधि है डेवलपर।

— pmillailla.org/en-US/docs/Web/JavaScript/Reference/…

यह एक बेहतर और अधिक कुशल समाधान है

— Aous1000

@tomtastico आप इसे 3D सरणी के लिए कैसे प्रदर्शित करेंगे? उदाहरण के लिए {"1": {"1.1": ["1.1.1", "1.1.2"]}}। और फिर घोंसले के 3 एनजीफोर

— फ्रैंक

@ धन्यवाद आपने अभी खुद कहा है। घोंसला *ngForएस। पहले दो का उपयोग करते हुए objectKeys, अंतरतम आवश्यकता नहीं है (जैसा कि यह एक सरणी है)।

— टोमैटोस्टिको

बहुत बढ़िया। ObjectKeys सेट करना = Object.keys सरलतम विधि है जिसे मैंने HTML से किसी ऑब्जेक्ट की लंबाई की जांच करने में सक्षम होने के लिए देखा है।

— JAC

Answer 2

में के रूप में कोणीय (v6.1.0) की नवीनतम रिलीज , कोणीय टीम नए ही रूप में नामित के लिए पाइप में बनाया जोड़ा गया है keyvalueनक्शे, वस्तुओं के माध्यम से पुनरावृति मदद करने के लिए पाइप, और सरणियों, में commonकोणीय पैकेज के मॉड्यूल। उदाहरण के लिए -

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

वर्किंग फोर्क्ड उदाहरण

अधिक उपयोगी जानकारी के लिए इसे यहाँ देखें -

• https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
• https://github.com/angular/angular/commit/2b49bf7

यदि आप कोणीय v5 या नीचे का उपयोग कर रहे हैं या आप पाइप का उपयोग करके प्राप्त करना चाहते हैं तो इस उत्तर का पालन करें

• ngfor का उपयोग करके वस्तु की पहुंच कुंजी और मूल्य

Comments

lol मुझे इस पाइप को एक्सेस करने के लिए एक एनजी 6 अपडेट करना था - महान सामान - thx

— danday74

आप एक कस्टम तुलनित्र का उपयोग करके मूल कुंजी क्रम रख सकते हैं: *ngFor="let item of testObject | keyvalue:keepOriginalOrder" और अपनी कक्षा में परिभाषित करें: public keepOriginalOrder = (a, b) => a.key

— माइक- shtil

पब्लिक कीप ऑरिजिनलऑर्डर = (a, b) => a.key इसके लिए बहुत कुछ

— पेरुमल

इसका उत्तर होना चाहिए -

— कैलोस

अविश्वसनीय यह पहले संस्करण के बाद से बाहर नहीं था

— कार्लोस पिनज़ोन

Answer 3

आप प्रत्येक तत्व के लिए कुंजी की सूची वापस करने के लिए एक कस्टम पाइप बना सकते हैं। ऐसा कुछ:

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

और इसे इस तरह उपयोग करें:

<tr *ngFor="let c of content">           
  <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td>
</tr>

संपादित करें

आप कुंजी और मान दोनों से युक्त प्रविष्टि भी लौटा सकते हैं:

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

और इसे इस तरह उपयोग करें:

<span *ngFor="let entry of content | keys">           
  Key: {{entry.key}}, value: {{entry.value}}
</span>

Comments

लापता समापन कोष्ठक पर ध्यान देंkeys.push({key: key, value: value[key]);

— Marton Pallagi

मैं वास्तव में *ngForअभिव्यक्ति के अंदर संग्रह बनाने के लिए पाइप का उपयोग करने से किसी को भी हतोत्साहित करता हूं । यह विशाल प्रदर्शन अड़चन पैदा करता है क्योंकि इसे हर बार परिवर्तन के लिए डिटेक्टर की जांच के लिए संग्रह उत्पन्न करने की आवश्यकता होती है।

— मार्टिन

समाधान के लिए धन्यवाद ... समस्या यह है कि जब भी वस्तु बदलती है, तो पाइप अपडेट नहीं होता है। यदि मैं pure:falseपाइप में जोड़ता हूं , तो यह बहुत अक्षम हो जाता है। जब भी मैं ऑब्जेक्ट को हटाता हूं (आइटम हटाता हूं) क्या आपके पास पाइप को मैन्युअल रूप से अपडेट करने का कोई समाधान है?

— नोहेन

जवाब थोड़ा पुराना है। लाइन * ngFor = "# सामग्री की प्रविष्टि। कुंजियाँ" ठीक से काम नहीं करती हैं और इसके लिए ... पाश बेहतर करने के लिए "के लिए बदलने के लिए" (Object.keys (मान) की मुख्य कुंजी) "

— प्रायोगिक

@RachChen टेम्पलेट्स में नहीं: common: NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of*ngFor in your templates.( jaxenter.com/road-to-angular-5-133253.html )

— mwld

Answer 4

अपडेट करें

में 6.1.0-beta.1 KeyValuePipe पेश किया गया था https://github.com/angular/angular/pull/24319

<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

प्लंकर उदाहरण

पुराना वर्जन

एक और तरीका यह है NgForInकि निर्देश का निर्माण किया जाए, जिसका उपयोग किया जाएगा:

<div *ngFor="let key in obj">
   <b>{{ key }}</b>: {{ obj[key] }}
</div>

प्लंकर उदाहरण

ngforin.directive.ts

@Directive({
  selector: '[ngFor][ngForIn]'
})
export class NgForIn<T> extends NgForOf<T> implements OnChanges {

  @Input() ngForIn: any;

  ngOnChanges(changes: NgForInChanges): void {
    if (changes.ngForIn) {
      this.ngForOf = Object.keys(this.ngForIn) as Array<any>;

      const change = changes.ngForIn;
      const currentValue = Object.keys(change.currentValue);
      const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined;
      changes.ngForOf =  new SimpleChange(previousValue, currentValue, change.firstChange);

      super.ngOnChanges(changes);
    }
  }
}

Answer 5

कोणीय 6.1 से आप कीवल्यू पाइप का उपयोग कर सकते हैं :

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

लेकिन इसमें असुविधाजनक है जो कुंजी मूल्य द्वारा परिणामी सूची को सॉर्ट करता है। यदि आपको तटस्थ कुछ चाहिए:

@Pipe({ name: 'keyValueUnsorted', pure: false  })
export class KeyValuePipe implements PipeTransform {
  transform(input: any): any {
    let keys = [];
    for (let key in input) {
      if (input.hasOwnProperty(key)) {
        keys.push({ key: key, value: input[key]});
      }
    }
    return keys;
  }
}

शुद्ध निर्दिष्ट करने के लिए मत भूलना : झूठी पाइप विशेषता। इस मामले में, प्रत्येक परिवर्तन-पता लगाने के चक्र पर पाइप को लागू किया जाता है, भले ही इनपुट संदर्भ नहीं बदला हो (इसलिए जब आप किसी ऑब्जेक्ट में गुण जोड़ते हैं तो)।

Comments

पहले से ही stackoverflow.com/a/51491848/5043867 से

— परदीप जैन

Answer 6

उदाहरण के साथ @ थिएरी के उत्तर का विस्तार।

key and value* NgFor लूप से प्राप्त करने के लिए कोई इनबिल्ट पाइप या विधि नहीं है । इसलिए हमें उसी के लिए कस्टम पाइप बनाना होगा। जैसा कि थिएरी ने कहा कि यहां कोड के साथ जवाब है।

** पाइप क्लास पाइपट्रांसफॉर्म इंटरफेस की ट्रांसफॉर्म पद्धति को लागू करता है जो इनपुट वैल्यू और पैरामीटर स्ट्रिंग्स का एक वैकल्पिक सरणी लेता है और ट्रांसफॉर्म किए गए मान को लौटाता है।

** परिवर्तन विधि एक पाइप के लिए आवश्यक है। पाइपट्रांसफॉर्म इंटरफेस उस विधि को परिभाषित करता है और टूलींग और कंपाइलर दोनों को गाइड करता है। यह वैकल्पिक है; कोणीय की परवाह किए बिना परिवर्तन विधि को देखता है और निष्पादित करता है। अधिक जानकारी के लिए पाइप यहाँ देखें

import {Component, Pipe, PipeTransform} from 'angular2/core';
import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common';

@Component({
    selector: 'my-app',
    templateUrl: 'mytemplate.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    pipes: [KeysPipe]
})
export class AppComponent { 

  demo = {
    'key1': 'ANGULAR 2',
    'key2': 'Pardeep',
    'key3': 'Jain',
  }
}


@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

और HTML हिस्सा है:

<ul>
  <li *ngFor='#key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

वर्किंग प्लैंक http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

आरसी के लिए अद्यतन

सुझाव के रूप में user6123723 (धन्यवाद) द्वारा टिप्पणी में यहाँ अद्यतन है।

<ul>
  <li *ngFor='let key of demo | keys'>
   Key: {{key.key}}, value: {{key.value}}
  </li>
</ul>

Comments

इसे अद्यतन करने की आवश्यकता है: यहां मुझे अभिव्यक्तियों के अंदर "#" चेतावनी दी गई है। इसके बजाय "लेट" का उपयोग करें! ("</ li> -> <ul * ngIf =" डेमो "> <li [ERROR ->] * ngFor = '# डेमो की कुंजी | चाबियाँ'> कुंजी: {{key.key}}, मान: {| {key.value}} </ li> "): myComponent @ 56: 6

— user6123723

निश्चित नहीं है कि यह नया है, लेकिन डॉक्स से उद्धृत करने के लिए:> हमें अपने पाइप को AppMulule के घोषणा सरणी में शामिल करना चाहिए।

— अक्किडेनजग्रोटस्क सिप

Answer 7

@ मर्टन को इस आधार पर स्वीकृत उत्तर पर एक महत्वपूर्ण आपत्ति थी कि पाइप प्रत्येक परिवर्तन का पता लगाने पर एक नया संग्रह बनाता है। मैं इसके बजाय एक HtmlService बनाऊंगा जो कि उपयोगिता कार्यों की एक श्रृंखला प्रदान करती है जिसे दृश्य इस प्रकार उपयोग कर सकते हैं:

@Component({
  selector: 'app-myview',
  template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>`
})
export class MyComponent {
  items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'};
  constructor(private html: HtmlService){}
}

@Injectable()
export class HtmlService {
  keys(object: {}) {
    return Object.keys(object);
  }
  // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others...
}

Comments

और कैसे यह सिर्फ Object.keys(...)* ngFor के अंदर से बेहतर है ?

— सिमोन_वेर

क्योंकि यह फेंक देगा TypeError: Cannot read property 'keys' of undefined:। यह टेम्प्लेट में समर्थित नहीं लगता है।

— स्टीफन पॉल

यह एक समाधान के रूप में बहुत अच्छी तरह से काम करता है और ऊपर बताए गए प्रदर्शन के मुद्दों से बचा जाता है। stackoverflow.com/questions/35534959/…

— जे। एडम कॉनर

हैलो, क्या यह b templateविकल्प में नहीं , बल्कि टेम्पलेट के वास्तविक HTML कोड में इस्तेमाल किया जा सकता है ? धन्यवाद

— Scaramouche

Answer 8

यदि आप पहले से ही लोडश का उपयोग कर रहे हैं, तो आप यह सरल तरीका कर सकते हैं जिसमें कुंजी और मूल्य दोनों शामिल हैं:

<ul>
  <li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li>
</ul>

टाइपस्क्रिप्ट फ़ाइल में, शामिल करें:

import * as _ from 'lodash';

और निर्यात किए गए घटक में शामिल हैं:

_: any = _;

Comments

क्षमा करें, लेकिन इस तरह की चीजों के लिए अतिरिक्त पुस्तकालय का उपयोग करने की आवश्यकता नहीं है। वैसे भी नए तरीकों का हमेशा स्वागत है :)

— परदीप जैन

Answer 9

पाइप के लिए धन्यवाद, लेकिन इससे पहले कि मैं इसे कोणीय 2 RC5 में उपयोग कर सकता था, मुझे कुछ बदलाव करने पड़े। पाइप आयात लाइन को बदल दिया और कुंजी सरणी आरंभीकरण में किसी भी प्रकार का जोड़ा।

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

 @Pipe({name: 'keys'})
 export class KeysPipe implements PipeTransform {
 transform(value) {
   let keys:any = [];
   for (let key in value) {
      keys.push( {key: key, value: value[key]} );
    }
     return keys;
  }
}

Comments

हाँ आयात में बदलाव किया गया है

— परदीप जैन

Answer 10

यहाँ किसी भी जवाब ने मेरे लिए काम नहीं किया, यहाँ मेरे लिए काम किया है:

pipes/keys.tsसामग्री के साथ बनाएँ :

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

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
    transform(value:any, args:string[]): any {
        let keys:any[] = [];
        for (let key in value) {
            keys.push({key: key, value: value[key]});
        }
        return keys;
    }
}

में जोड़ें app.module.ts(आपका मुख्य मॉड्यूल):

import { KeysPipe } from './pipes/keys';

और फिर अपने मॉड्यूल घोषणाओं में कुछ इस तरह जोड़ें:

@NgModule({
    declarations: [
        KeysPipe
    ]
})
export class AppModule {}

तब आपके विचार टेम्पलेट में आप कुछ इस तरह का उपयोग कर सकते हैं:

<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option>

यदि आप अधिक पढ़ना चाहते हैं तो यहां एक अच्छा संदर्भ है।

Comments

क्या मुझे पता है कि आपके उत्तर और आपके द्वारा दिए गए अन्य उत्तर (केवल पाइप का उपयोग करके) में क्या अंतर है? यह ऊपर जैसा ही प्रतीत होता है

— परदीप जैन

ज़रूर 1. ऊपर दिए गए उदाहरण * ngFor = "# प्रविष्टि" के बजाय * ngFor = "की प्रविष्टि दें" और मेरे संकलक ने #entry सिंटैक्स स्वीकार नहीं किया, संदर्भ # का उपयोग नहीं करता है। "(myData | चाबियाँ) का प्रवेश करने दें" एक बेहतर समाधान प्रतीत होता है। 2. मेरे संकलक ने पाइप क्लास के उदाहरण को या तो मान्य नहीं किया क्योंकि यह स्पष्ट डेटा प्रकारों को याद नहीं कर रहा था इसलिए मैंने इसे जोड़ा। 3. ऊपर दिए गए उदाहरणों से यह नहीं पता चलता है कि पाइप को एक परियोजना में कैसे एकीकृत किया जाए जो मेरा जवाब है, आपको इसे मुख्य मॉड्यूल में आयात करना होगा।

— कोज़हसन

हाहा हाँ, आपत्तिजनक, क्योंकि जब जवाब दिया गया था उस समय वाक्यविन्यास सहित #आदि। आपका जवाब सही है, इसमें भी कोई शक नहीं है

— परदीप जैन

Answer 11

वहाँ एक अच्छा अच्छा पुस्तकालय है कि अन्य अच्छा पाइप के बीच यह करता है। इसे एनएक्सएक्स-पाइप कहा जाता है ।

उदाहरण के लिए, कुंजी पाइप किसी वस्तु के लिए कुंजी देता है, और मान किसी वस्तु के लिए पाइप रिटर्न मान देता है:

चाबियाँ पाइप

<div *ngFor="let key of {foo: 1, bar: 2} | keys">{{key}}</div> 
<!-- Output: 'foo' and 'bar -->

मूल्य पाइप

<div *ngFor="let value of {foo: 1, bar: 2} | values">{{value}}</div>
<!-- Output: 1 and 2 -->

अपने स्वयं के कस्टम पाइप बनाने की कोई आवश्यकता नहीं है :)

Comments

अच्छा वैकल्पिक, लेकिन बात यह है कि कोड की सरल शांति के लिए बाहरी पुस्तकालय का उपयोग करना है अगर हम पाइप जैसे सरल कोड का उपयोग करके ऐसा कर सकते हैं

— परदीप जैन

उम्म ... लेकिन यह एक पाइप है? जब आप लाइब्रेरी आयात करते हैं तो यह आपके पैकेज में सिर्फ एक लाइन होती है। आपके मॉड्यूल में एक और दो लाइनें। दूसरी ओर, एक कस्टम पाइप को कोड की कुछ 10-20 पंक्तियों के साथ एक अलग फ़ाइल की आवश्यकता होती है और आपके मॉड्यूल में आयात लाइनें भी। हमें अपनी परियोजनाओं में एनजीएक्स-पाइप का उपयोग करना बहुत आसान लगता है। हमें पहिया को क्यों मजबूत करना चाहिए? :)

— रिचिएरॉक

हाँ, इसमें कोई संदेह नहीं है, वास्तव में एक राय आधारित है, आप इन दोनों में से किसी एक को चुन सकते हैं, कोई भी गलत तरीका नहीं है।

— परदीप जैन

तो यदि आप कोई कस्टम पाइप लिखते हैं, आपको लगता है कि कस्टम पाइप का परीक्षण करना चाहिए नहीं है और साथ ही । तो यह पाइप कोड की 10-20 पंक्तियां हैं, और फिर पाइप का परीक्षण करने के लिए परीक्षण कोड की शायद 20-40 लाइनें हैं।

— danwellman

Answer 12

सूचकांक का उपयोग करें:

<div *ngFor="let value of Objects; index as key">

उपयोग:

{{key}} -> {{value}}

Comments

यह मेरे लिए कुछ नया है, बेहतर है यदि आप अपने उत्तर के साथ उदाहरण जोड़ सकते हैं :) इसके अलावा क्या आप मुझे उसी के लिए किसी भी दस्तावेज पर इंगित कर सकते हैं?

— परदीप जैन

वस्तुओं का प्रकार क्या है? सरणी या मानचित्र? कृपया इसे स्पष्ट करें। अग्रिम धन्यवाद

— तुलसी मोहम्मद

Answer 13

यहाँ सरल उपाय है

आप इसके लिए टाइपस्क्रिप्ट पुनरावृत्तियों का उपयोग कर सकते हैं

import {Component} from 'angular2/core';
declare var Symbol;
@Component({
    selector: 'my-app',
    template:`<div>
    <h4>Iterating an Object using Typescript Symbol</h4><br>
Object is : <p>{{obj | json}}</p>
</div>
============================<br>
Iterated object params are:
<div *ngFor="#o of obj">
{{o}}
</div>

`
})
export class AppComponent {
  public obj: any = {
    "type1": ["A1", "A2", "A3","A4"],
    "type2": ["B1"],
    "type3": ["C1"],
    "type4": ["D1","D2"]
  };

  constructor() {
    this.obj[Symbol.iterator] =  () => {
          let i =0;

          return {
            next: () => {
              i++;
              return {
                  done: i > 4?true:false,
                  value: this.obj['type'+i]
              }
            }
          }
    };
  }
}

http://plnkr.co/edit/GpmX8g?p=info

Answer 14

डेमो प्रकार को सरणी में बदलें या अपनी वस्तु पर पुनरावृत्त करें और किसी अन्य सरणी पर धक्का दें

public details =[];   
Object.keys(demo).forEach(key => {
      this.details.push({"key":key,"value":demo[key]);
    });

और html से:

<div *ngFor="obj of details">
  <p>{{obj.key}}</p>
  <p>{{obj.value}}</p>
  <p></p>
</div>

Comments

यह एक उपयुक्त विधि नहीं है, यह किसी के द्वारा आसानी से किया जा सकता है।

— परदीप जैन

Answer 15

मुझे लगता है कि Object.keys इस समस्या का सबसे अच्छा समाधान है। किसी के लिए भी जो इस उत्तर पर आता है और यह पता लगाने की कोशिश कर रहा है कि Object.keys उन्हें ['की 1' के बजाय ['0', '1'] दे रहा है। "और" में:

मैं पहले से ही Object.keys का उपयोग कर रहा था, कुछ इस तरह:

interface demo {
    key: string;
    value: string;
}

createDemo(mydemo: any): Array<demo> {
    const tempdemo: Array<demo> = [];

    // Caution: use "of" and not "in"
    for (const key of Object.keys(mydemo)) {
        tempdemo.push(
            { key: key, value: mydemo[key]}
        );
    }

    return tempdemo;
}

हालांकि, के बजाय

for (const key OF Object.keys(mydemo)) {

मैंने अनजाने में लिखा था

for (const key IN Object.keys(mydemo)) {

जो बिना किसी त्रुटि के "ठीक" काम करता है और वापस लौट आता है

[{key: '0', value: undefined}, {key: '1', value: undefined}]

मुझे लगभग 2 घंटे गुगली और कोसने में लगे।

(थप्पड़ माथे)

Answer 16

आप प्राप्त कर सकते हैं गतिशील वस्तु की कुंजी यह कोशिश कर रहा द्वारा साथ

myObj['key']

Answer 17

आपको इसे अभी के लिए इस तरह से करना होगा, मुझे पता नहीं है कि आप बहुत कुशल नहीं हैं क्योंकि आप फायरबेस से प्राप्त वस्तु को बदलना नहीं चाहते हैं।

    this.af.database.list('/data/' + this.base64Email).subscribe(years => {
        years.forEach(year => {

            var localYears = [];

            Object.keys(year).forEach(month => {
                localYears.push(year[month])
            });

            year.months = localYears;

        })

        this.years = years;

    });