angular - * এনজিফোর্ড ব্যবহার করে কীভাবে অবজেক্ট কী পুনরাবৃত্তি করবেন?



typescript object (3)

হালনাগাদ

6.1.0-beta.1 KeyValuePipe কীভ্যালু KeyValuePipe চালু হয়েছিল https://github.com/angular/angular/pull/24319

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

Plunker উদাহরণ

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

আপনি এই জাতীয় কিছু চেষ্টা করতে পারেন

export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => Object.assign({ key }, value[key]));
    }
}

এবং তারপরে আপনার টেমপ্লেটে

  <div *ngFor="let obj of objs | ObjNgFor">
   {{obj.key}} - {{obj.description}}
  </div>

Plunker

আমি চারপাশে খনন করে চলেছি এবং জানতে পেরেছি যে আমি কোনও বস্তুর উপরে * এনজিওর জন্য নিম্নলিখিতটি ব্যবহার করতে পারি:

 <div *ngFor="#obj of objs | ObjNgFor">...</div>

যেখানে ObjNgFor পাইপটি রয়েছে:

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

যাইহোক, আমার যখন এই জাতীয় কোনও জিনিস থাকে:

{
"propertyA":{
    "description":"this is the propertyA",
    "default":"sth"
 },
"propertyB":{
    "description":"this is the propertyB",
    "default":"sth"
 }
}

আমি কীভাবে 'প্রপার্টিএ' এবং 'সম্পত্তি বি' বের করতে পারি তা সম্পর্কে আমি নিশ্চিত নই, যাতে এটি * এনজিফোর্ডের নির্দেশিকা থেকে অ্যাক্সেসযোগ্য। কোন ধারনা?

হালনাগাদ

আমি যা করতে চাই তা হ'ল নিম্নলিখিত এইচটিএমএল উপস্থাপন করা:

        <div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
            <div class="parameter-desc">
                {{SOMETHING}}:{{obj.description}}
            </div>
        </div>

যেখানে কিছু propertyA A এবং propertyA বি এর সমান হবে (বস্তুটি এভাবেই কাঠামোগত হয়)। সুতরাং, এটি হতে পারে:

propertyA:this is the propertyA
propertyB:this is the propertyB

Answer #1

অথবা একটি পাইপ তৈরি এবং * এনজিফোর্ডে কোনও বস্তুটি পাস করার Object.keys(MyObject) কেবল Object.keys(MyObject) * এনজিফোরে পাস করুন। এটি পাইপের মতোই ফেরত দেয় তবে ঝামেলা ছাড়াই।

টাইপস্ক্রিপ্ট ফাইলটিতে:

let list = Object.keys(MyObject); // good old javascript on the rescue

টেমপ্লেটে (এইচটিএমএল):

*ngFor="let item of list"

Answer #2

keys.pipe.ts

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

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(obj: Object, args: any[] = null): any {
        let array = [];
        Object.keys(obj).forEach(key => {
            array.push({
                value: obj[key],
                key: key
            });
        });
        return array;
    }
}

app.module.ts

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

@NgModule({
  declarations: [
    ...
    KeysPipe
  ]
})

example.component.html

<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
    {{ item.value }}
</elem>





ngfor