ฉันสับสนเล็กน้อยเกี่ยวกับวิธีรับkeyและvalueวัตถุใน angular2 ในขณะที่ใช้*ngForเพื่อวนวัตถุ ฉันรู้ในเชิงมุม 1.x มีไวยากรณ์เหมือนกัน

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

แต่ฉันไม่รู้วิธีการทำเช่นเดียวกันใน angular2 ฉันลองทำสิ่งที่คล้ายกันโดยไม่ประสบความสำเร็จ:

<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อย่างไร หลังจากค้นหาอย่างครอบคลุมฉันพบความคิดในการใช้ท่อ แต่ฉันไม่รู้ว่าจะทำยังไง มีท่อแบบ inbuilt สำหรับทำแบบเดียวกันใน angular2 หรือไม่?

มีสามารถเข้าถึงได้ในแม่แบบและใช้ใน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(){}
}

เช่นเดียวกับในAngular รีลีสล่าสุด (v6.1.0)ทีม Angular ได้เพิ่มไพพ์แบบบิวด์อินใหม่สำหรับชื่อเดียวกับไพพ์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

หากคุณกำลังใช้ Angular v5 หรือต่ำกว่าหรือคุณต้องการบรรลุการใช้ pipe ตามคำตอบนี้

• เข้าถึงคีย์และค่าของวัตถุโดยใช้ ngfor

คุณสามารถสร้างไปป์ที่กำหนดเองเพื่อส่งคืนรายการคีย์สำหรับแต่ละองค์ประกอบ อะไรแบบนั้น:

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>

ปรับปรุง

ใน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);
    }
  }
}

จาก Angular 6.1 คุณสามารถใช้keyvalue pipe ได้:

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

อย่าลืมระบุแอตทริบิวต์pure: false pipe ในกรณีนี้ไพพ์จะถูกเรียกใช้ในแต่ละรอบการตรวจจับการเปลี่ยนแปลงแม้ว่าการอ้างอิงอินพุตจะไม่เปลี่ยนแปลง (เช่นในกรณีที่คุณเพิ่มคุณสมบัติให้กับวัตถุ)

ตัวอย่างคำตอบของ @ Thierry อย่างละเอียด

ไม่มีkey and valueไพพ์ภายในหรือวิธีการที่จะได้รับจากการวนซ้ำ * ngFor ดังนั้นเราต้องสร้างไปป์ที่กำหนดเองสำหรับเดียวกัน ตามที่กล่าวว่านี่เป็นคำตอบด้วยรหัส

** คลาสไปป์ใช้วิธีการแปลงอินเทอร์เฟซของ PipeTransform ซึ่งรับค่าอินพุตและอาร์เรย์ทางเลือกของสตริงพารามิเตอร์และส่งคืนค่าที่แปลงแล้ว

** วิธีการเปลี่ยนรูปเป็นสิ่งจำเป็นสำหรับท่อ ส่วนต่อประสาน PipeTransform จะกำหนดวิธีการนั้นและให้คำแนะนำเครื่องมือและคอมไพเลอร์ มันเป็นตัวเลือก; Angular ค้นหาและดำเนินการวิธีการแปลงโดยไม่คำนึงถึง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับท่ออ้างอิงที่นี่

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>

การทำงานของ Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

อัปเดตเป็น RC

ตามที่แนะนำโดย user6123723 (ขอบคุณ) ในความคิดเห็นที่นี่คือการปรับปรุง

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

@Marton มีข้อคัดค้านที่สำคัญสำหรับคำตอบที่ยอมรับเนื่องจากท่อสร้างคอลเลกชันใหม่ในการตรวจจับการเปลี่ยนแปลงแต่ละครั้ง ฉันจะสร้าง 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...
}

หากคุณกำลังใช้งาน Lodash อยู่แล้วคุณสามารถทำตามวิธีการง่าย ๆ ซึ่งรวมถึงทั้งรหัสและค่า:

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

ในไฟล์ typescript รวมถึง:

import * as _ from 'lodash';

และในองค์ประกอบที่ส่งออกรวมถึง:

_: any = _;

ขอบคุณสำหรับท่อ แต่ฉันต้องทำการเปลี่ยนแปลงบางอย่างก่อนที่ฉันจะสามารถใช้ในเชิงมุม 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;
  }
}

ไม่มีคำตอบที่นี่สำหรับฉันออกจากกล่องนี่คือสิ่งที่ได้ผลสำหรับฉัน:

สร้าง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>

นี่คือการอ้างอิงที่ดีฉันพบว่าถ้าคุณต้องการอ่านเพิ่มเติม

มีห้องสมุดที่ดีจริงๆที่ทำสิ่งนี้ได้ในหมู่คนอื่น มันเรียกว่าNGX ท่อ

ตัวอย่างเช่น keys pipe ส่งคืนคีย์สำหรับวัตถุและไพพ์ค่าส่งคืนค่าสำหรับวัตถุ:

ท่อกุญแจ

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

ไม่จำเป็นต้องสร้างไปป์ที่คุณกำหนดเอง :)

ใช้ดัชนี:

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

การใช้งาน:

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

นี่คือทางออกที่ง่าย

คุณสามารถใช้ตัวพิมพ์ดีด typescript สำหรับสิ่งนี้

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

เปลี่ยนประเภทการสาธิตเป็นอาร์เรย์หรือวนซ้ำวัตถุของคุณและกดไปที่อาร์เรย์อื่น

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>

ฉันคิดว่า Object.key เป็นทางออกที่ดีที่สุดสำหรับปัญหานี้ สำหรับทุกคนที่เจอคำตอบนี้และพยายามหาสาเหตุที่ทำให้ Object.keys ให้พวกเขา ['0', '1'] แทนที่จะเป็น ['key1', 'key2'] เรื่องเตือน - ระวังความแตกต่างระหว่าง " จาก "และ" ใน ":

ฉันใช้ Object.key อยู่แล้วสิ่งที่คล้ายกับสิ่งนี้:

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 ชั่วโมงกับ googling และ cursing ..

(ตบหน้าผาก)

คุณสามารถรับกุญแจของวัตถุแบบไดนามิกได้โดยลองสิ่งนี้

myObj['key']

ตอนนี้คุณต้องทำแบบนี้ฉันรู้ว่าไม่มีประสิทธิภาพมากเพราะคุณไม่ต้องการแปลงวัตถุที่คุณได้รับจาก firebase

    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;

    });