অ্যাক্সেস কী এবং অবজেক্টের মান * এনজিফোর্ড ব্যবহার করে

Question

আমি একটু কিভাবে যাবেন সে বিষয়ে বিভ্রান্ত am keyএবং valueব্যবহার করার সময় angular2 মধ্যে একটি বস্তুর *ngForবস্তুর উপর iterating জন্য। আমি কৌণিক 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'}],
  }

আমার প্রচেষ্টার সাথে এখানে একটি প্লানকর: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p= পূর্বরূপ দেখুন

আমি কীভাবে key1এবং key2গতিশীলভাবে ব্যবহার করতে পারি *ngFor? ব্যাপক অনুসন্ধানের পরে, আমি পাইপগুলি ব্যবহার করার ধারণাটি পেয়েছি তবে কীভাবে এটি করা যায় তা আমি জানি না। কৌণিক 2 তে একই কাজ করার জন্য কি কোনও ইনবিল্ট পাইপ রয়েছে?

Comments

বর্তমানে key, valueকৌনিক ২ তে জোড়া ধরণের সিনট্যাক্স সমর্থন নেই ngFor, আপনার এই উত্তরটি দেখতে হবে

— পঙ্কজ পার্কার

@ পঙ্কজপ্রার হ্যাঁ ইতিমধ্যে এই উত্তরটি পড়েছেন। আপাতত কোন বিকল্প?

— পারদীপ জৈন

@ প্রদীপ আমি এখন এর জন্য অন্য কোনও উপায় নিয়ে ভাবি না, আপনার নিজের 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

@ পারদীপজাইন এটি একটি ইএস 5 পদ্ধতি বিকাশকারী.মোজিলা.আর.ইন.ইউএস

— ডকস / ওয়েব

এটি একটি আরও ভাল এবং আরও কার্যকর সমাধান

— Aous1000

@ টমটাস্টিকো আপনি কীভাবে এটি 3D অ্যারের জন্য প্রদর্শন করবেন? উদাহরণস্বরূপ {"1": {"1.1": ["1.1.1", "1.1.2"]}}} এবং তারপরে 3 এনজিফোর্ডের বাসা বেঁধে

— ফ্রাঙ্ক

@ ফ্র্যাঙ্ক আপনি নিজেই এটি বলেছেন। নেস্ট *ngForএস। প্রথম দুটি ব্যবহার করে objectKeys, অন্তঃস্থরের কোনও প্রয়োজন নেই (এটি কেবলমাত্র অ্যারে হিসাবে)।

— টমটাস্টিকো

অসাধারণ. অবজেক্টকিজ = অবজেক্ট.কিজ নির্ধারণ করা সবচেয়ে সহজ পদ্ধতিটি আমি এইচটিএমএল থেকে কোনও বস্তুর দৈর্ঘ্য পরীক্ষা করতে সক্ষম হতে দেখেছি।

— জ্যাক 15

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>

কাজ forking উদাহরণ

আরও দরকারী তথ্যের জন্য এটি এখানে পরীক্ষা করে দেখুন -

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

আপনি যদি কৌণিক ভি 5 ব্যবহার করছেন বা নীচে বা আপনি পাইপ ব্যবহার করে অর্জন করতে চান তবে এই উত্তরটি অনুসরণ করুন

• এনজিওর ব্যবহার করে অ্যাক্সেস কী এবং অবজেক্টের মান

Comments

Lol আমাকে কেবল এই পাইপটি অ্যাক্সেস করতে একটি এনজি 6 আপডেট করতে হয়েছিল - দুর্দান্ত জিনিস - thx

— danday74

আপনি একটি কাস্টম তুলক ব্যবহার করে মূল কী অর্ডারটি রাখতে পারেন: *ngFor="let item of testObject | keyvalue:keepOriginalOrder" এবং আপনার শ্রেণিতে সংজ্ঞায়িত করুন: public keepOriginalOrder = (a, b) => a.key

— মাইক-শিটিল

প্রকাশ্য keepOriginalOrder = (A, B) => a.key ধন্যবা এই জন্য অনেক

— Kumaresan Perumal থেকে

এই উত্তরটি হওয়া উচিত - কৌনিক 7

— ক্যালিওগুলিতে

অবিশ্বাস্য এটি প্রথম সংস্করণ থেকে খুঁজে পাওয়া যায় নি

— কার্লোস পিনজান

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

— মার্টন পল্লगी

আমি আসলে কাউকে *ngForপ্রকাশের ভিতরে সংগ্রহ তৈরি করতে পাইপ ব্যবহার করা থেকে নিরুৎসাহিত করি । এটি বিশাল পারফরম্যান্সের বাধা তৈরি করে কারণ পরিবর্তনের জন্য আবিষ্কারকরা যাচাই করে প্রতিবার সংগ্রহ সংগ্রহ করা দরকার।

— মার্টিন

সমাধানের জন্য ধন্যবাদ ... সমস্যাটি হ'ল যখনই বস্তুটি পরিবর্তন হয়, পাইপ আপডেট হয় না। আমি যদি pure:falseপাইপে যুক্ত করি তবে এটি খুব অদক্ষ হয়ে ওঠে। আমি যখনই বস্তুটি পরিবর্তন করি (আইটেম সরান) তখন ম্যানুয়ালি পাইপ আপডেট করার কোনও সমাধান আছে?

— ncohen

উত্তরটি কিছুটা পুরানো। * এনজিফোর্ড = "# কন্টেন্টের প্রবেশ | কিগুলির" লাইনটি ঠিকমত কাজ করে না এবং ... এর জন্য "অবজেক্ট.কিজ (মান) এর কনস কী" "

— পরীক্ষক

@ র্যাচচেন টেম্পলেটগুলিতে নেই: 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>

Plunker উদাহরণ

পূর্ববর্তী সংস্করণ

আর একটি পদ্ধতি হ'ল NgForInনির্দেশ তৈরি করা যা ব্যবহার করা হবে:

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

Plunker উদাহরণ

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* এনজিফোর্ড লুপ থেকে পাওয়ার জন্য কোনও ইনবিল্ট পাইপ বা পদ্ধতি নেই । সুতরাং আমরা একই জন্য কাস্টম পাইপ তৈরি করতে হবে। তিরি হিসাবে এখানে কোড সহ উত্তর আছে।

** পাইপ শ্রেণি পাইপ ট্রান্সফর্ম ইন্টারফেসের রূপান্তর পদ্ধতি প্রয়োগ করে যা একটি ইনপুট মান এবং প্যারামিটার স্ট্রিংগুলির একটি alচ্ছিক অ্যারে নেয় এবং রূপান্তরিত মানটি দেয়।

** ট্রান্সফর্ম পদ্ধতিটি পাইপের জন্য প্রয়োজনীয়। পাইপ ট্রান্সফর্ম ইন্টারফেসটি সেই পদ্ধতিটি সংজ্ঞায়িত করে এবং টুলিং এবং সংকলক উভয়কেই গাইড করে। এটি alচ্ছিক; কৌণিক নির্বিশেষে রূপান্তর পদ্ধতির সন্ধান করে এবং সম্পাদন করে। আরও তথ্যের জন্য পাইপ এখানে রেফারেন্স করুন

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

এবং এইচটিএমএল অংশটি হ'ল:

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

কাজ করছেন Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p= পূর্বরূপ

আরসিতে আপডেট করুন

এখানে মন্তব্য হিসাবে ব্যবহারকারী 6123723 (ধন্যবাদ) দ্বারা প্রস্তাবিত আপডেট হয়।

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

Comments

এটি আপডেট করা দরকার: এক্সপ্রেশনগুলির অভ্যন্তরে আমি "#" পেয়েছি এমন সতর্কতা হ্রাস করা হয়েছে। পরিবর্তে "লেট" ব্যবহার করুন! ("</ li> -> <ul * ngIf =" ডেমো "> <li [ERROR ->] * এনজিফোর্স = '# ডেমোর কি' | কী '> কী: {{key.key}}, মান: { {কী.ভ্যালু}} </li> "): মাই কম্পোনেন্ট @ 56: 6

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

এটি নতুন কিনা নিশ্চিত না, তবে ডক্স থেকে উদ্ধৃত করার জন্য:> আমাদের অবশ্যই অ্যাপমডুলের ঘোষণার অ্যারে আমাদের পাইপটি অন্তর্ভুক্ত করতে হবে।

— আকজিডেনজগ্রোটেস্ক

Answer 7

পাইপ প্রতিটি পরিবর্তন সনাক্তকরণের জন্য পাইপ একটি নতুন সংগ্রহ তৈরি করে যে ভিত্তিতে গ্রহণযোগ্য উত্তরে @ মার্টনের একটি গুরুত্বপূর্ণ আপত্তি ছিল । আমি পরিবর্তে একটি এইচটিএমএল সার্ভিস তৈরি করব যা এই ইউটিলিটি ফাংশনগুলির একটি পরিসীমা সরবরাহ করে যা ভিউটি নীচে ব্যবহার করতে পারে:

@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(...)* এনজিফোর্ডের অভ্যন্তরের চেয়ে এটি কীভাবে ভাল ?

— সাইমন_উইভার

কারণ এটা নিক্ষেপ করা হবে: TypeError: Cannot read property 'keys' of undefined। এটি টেমপ্লেটে সমর্থিত বলে মনে হচ্ছে না।

— স্টিফেন পল

এটি একটি সমাধান হিসাবে খুব ভাল কাজ করে এবং উপরে উল্লিখিত কর্মক্ষমতা সম্পর্কিত সমস্যাগুলি এড়িয়ে চলে। stackoverflow.com/questions/35534959/…

— জে অ্যাডাম কনার

হ্যালো, এই বিটি templateবিকল্পটিতে ব্যবহার না করে , তবে টেমপ্লেটের আসল এইচটিএমএল কোডে ব্যবহার করতে পারেন? ধন্যবাদ

— স্কারামাউচে

Answer 8

আপনি যদি ইতিমধ্যে লোডাশ ব্যবহার করছেন তবে আপনি এই সহজ পদ্ধতির সাথে কী এবং মান উভয়ই অন্তর্ভুক্ত করতে পারেন:

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

টাইপ স্ক্রিপ্ট ফাইলে অন্তর্ভুক্ত করুন:

import * as _ from 'lodash';

এবং রফতানী উপাদানটিতে অন্তর্ভুক্ত করুন:

_: any = _;

Comments

দুঃখিত তবে এই জাতীয় জিনিসগুলির জন্য লোড্যাশের মতো অতিরিক্ত গ্রন্থাগার ব্যবহার করার দরকার নেই। যাইহোক নতুন পদ্ধতি সর্বদা স্বাগত :)

— পারদীপ জৈন

Answer 9

পাইপের জন্য ধন্যবাদ তবে কৌনিক 2 আরসি 5 এ ব্যবহার করার আগে আমাকে কিছু পরিবর্তন করতে হয়েছিল। পাইপ আমদানি লাইনটি পরিবর্তন করা হয়েছে এবং কী অ্যারে প্রারম্ভিককরণের জন্য যেকোন প্রকারের যোগ করা হয়েছে।

 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

আমি কি জানতে পারি যে উপরে বর্ণিত আপনার উত্তর এবং অন্যান্য উত্তরের (কেবল পাইপ ব্যবহার করে) পার্থক্য কী? এটি উপরের মতোই বলে মনে হচ্ছে

— পারদীপ জৈন

অবশ্যই ১. উপরের উদাহরণগুলিতে * এনজিফোর্ড = "# এন্ট্রি" ব্যবহারের পরিবর্তে * এনজিফোর্ড = "এনট্রি যাক" এবং আমার সংকলক # সেন্ট্রি সিনট্যাক্স গ্রহণ করেনি, রেফারেন্সটি # ব্যবহার করে না। "(মাইডাটা | কীগুলি) এন্ট্রি করা যাক" আরও ভাল সমাধান বলে মনে হচ্ছে। ২. আমার সংকলক পাইপ শ্রেণীর উদাহরণটিকে বৈধতা দেয়নি কারণ এটিতে স্পষ্ট ডেটা প্রকারের অনুপস্থিত ছিল তাই আমি এটি যুক্ত করেছি। ৩. উপরের উদাহরণগুলিতে পাইপগুলিকে কীভাবে কোনও প্রকল্পে সংহত করতে হয় তা দেখায় না যা আমার উত্তরটি করে, আপনাকে এটি মূল মডিউলটিতে আমদানি করতে হবে।

— cjohansson

হাহা হ্যাঁ অফকোরিস, কারণ যখন সেই সময়ে উত্তর দেওয়া হয়েছিল বাকী বাক্য গঠন সহ #বিটিডব্লিউ আপনার উত্তরও সন্দেহ নেই যে সঠিক

— পারদীপ জৈন

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-10 লাইন কোডের কোড এবং আপনার মডিউলটিতে আমদানি লাইনগুলির সাথে একটি পৃথক ফাইল প্রয়োজন। আমরা আমাদের প্রকল্পগুলিতে খুব সহজেই এনজিএক্স-পাইপ ব্যবহার করতে পাই। আমাদের চাকা পুনরায় উদ্ভাবন করা উচিত কেন? :)

— রিচিরক

হ্যাঁ সন্দেহ নেই, আসলে এটি একটি মতামত ভিত্তিক, আপনি এই দুটিয়ের মধ্যে যে কোনও একটি চয়ন করতে পারেন, কেউই ভুল উপায় নয়।

— পারদীপ জৈন

ভুলবেন আপনি একটি কাস্টম নল লিখুন, আপনি যে কাস্টম নল পরীক্ষা আবশ্যক না পাশাপাশি । সুতরাং এটি পাইপ কোডের 10-20 লাইন এবং তারপরে সম্ভবত পাইপটি পরীক্ষা করার জন্য 20-40 টি টেস্ট কোডের লাইন।

— ড্যানওয়েলম্যান

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

এবং এইচটিএমএল থেকে:

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

Comments

এটি কোনও উপযুক্ত পদ্ধতি নয়, এটি যে কেউ সহজেই করতে পারেন।

— পারদীপ জৈন

Answer 15

আমি মনে করি অবজেক্ট.কিজই এই সমস্যার সর্বোত্তম সমাধান। যে কেউ এই উত্তরটি দেখতে পেয়েছে এবং অবজেক্ট.কিগুলি কেন তাদেরকে '[' 1 ',' কী 2 '] এর পরিবর্তে [' 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;

    });