Tôi hơi bối rối về cách lấy keyvà valuecủa một đối tượng trong angular2 trong khi sử dụng *ngForđể lặp lại đối tượng. Tôi biết trong góc 1.x có một cú pháp như

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

nhưng tôi không biết làm thế nào để làm điều tương tự trong angular2. Tôi đã thử một cái gì đó tương tự, nhưng không thành công:

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

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

Đây là một plnkr với nỗ lực của tôi: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

Làm thế nào tôi có thể nhận key1và key2sử dụng động *ngFor? Sau khi tìm kiếm rộng rãi, tôi tìm thấy ý tưởng sử dụng đường ống nhưng tôi không biết làm thế nào để đi về nó. Có bất kỳ đường ống sẵn có để làm tương tự trong angular2?

Có Object.keysthể truy cập trong mẫu và sử dụng nó trong *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(){}
}

Như trong bản phát hành mới nhất của Angular (v6.1.0) , Angular Team đã thêm ống mới được xây dựng cho cùng tên với keyvalueống để giúp bạn lặp qua các đối tượng, bản đồ và mảng, trong commonmô-đun của gói góc. Ví dụ -

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

Ví dụ làm việc

kiểm tra nó ở đây để biết thêm thông tin hữu ích -

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

Nếu bạn đang sử dụng Angular v5 trở xuống hoặc bạn muốn đạt được bằng cách sử dụng đường ống, hãy làm theo câu trả lời này

• khóa truy cập và giá trị của đối tượng sử dụng ngfor

Bạn có thể tạo một đường ống tùy chỉnh để trả về danh sách khóa cho từng thành phần. Một cái gì đó như thế:

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

và sử dụng nó như thế:

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

Biên tập

Bạn cũng có thể trả về một mục chứa cả khóa và giá 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;
  }
}

và sử dụng nó như thế:

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

Cập nhật

Trong 6.1.0-beta.1 KeyValuePipe đã được giới thiệu https://github.com/angular/angular/pull/24319

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

Ví dụ Plunker

Phiên bản trước

Một cách tiếp cận khác là tạo ra lệnh NgForInsẽ được sử dụng như:

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

Ví dụ 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);
    }
  }
}

Từ Angular 6.1, bạn có thể sử dụng ống keyvalue :

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

Nhưng nó có sự bất tiện khi sắp xếp danh sách kết quả theo giá trị khóa. Nếu bạn cần một cái gì đó trung lập:

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

Đừng quên chỉ định thuộc tính ống thuần: false . Trong trường hợp này, đường ống được gọi trên mỗi chu kỳ phát hiện thay đổi, ngay cả khi tham chiếu đầu vào không thay đổi (đó là trường hợp khi bạn thêm thuộc tính vào một đối tượng).

Xây dựng câu trả lời của @ Thierry với ví dụ.

Không có đường ống hoặc phương thức sẵn có để lấy key and valuetừ vòng lặp * ngFor. vì vậy chúng ta phải tạo đường ống tùy chỉnh cho cùng. như thierry đã nói ở đây là câu trả lời với mã.

** Lớp ống thực hiện phương thức biến đổi của giao diện TubeTransform lấy giá trị đầu vào và một mảng tùy chọn của các chuỗi tham số và trả về giá trị được chuyển đổi.

** Phương pháp biến đổi là điều cần thiết cho một đường ống. Giao diện TubeTransform định nghĩa phương thức đó và hướng dẫn cả công cụ và trình biên dịch. Nó là tùy chọn; Angular tìm kiếm và thực hiện phương thức biến đổi bất kể. để biết thêm thông tin liên quan đến đường ống tham khảo ở đây

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

và phần HTML là:

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

Làm việc Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

cập nhật lên RC

như được đề xuất bởi user6123723 (cảm ơn) trong bình luận ở đây là cập nhật.

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

@Marton đã phản đối quan trọng đối với câu trả lời được chấp nhận với lý do đường ống tạo ra một bộ sưu tập mới trên mỗi phát hiện thay đổi. Thay vào đó, tôi sẽ tạo một HtmlService cung cấp một loạt các chức năng tiện ích mà chế độ xem có thể sử dụng như sau:

@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...
}

Nếu bạn đã sử dụng Lodash, bạn có thể thực hiện phương pháp đơn giản này bao gồm cả khóa và giá trị:

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

Trong tệp bản thảo, bao gồm:

import * as _ from 'lodash';

và trong thành phần xuất khẩu, bao gồm:

_: any = _;

Cảm ơn về đường ống nhưng tôi đã phải thực hiện một số thay đổi trước khi tôi có thể sử dụng nó trong góc 2 RC5. Đã thay đổi dòng nhập ống và cũng thêm loại bất kỳ vào khởi tạo mảng khóa.

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

Không có câu trả lời nào ở đây có tác dụng với tôi, đây là câu trả lời cho tôi:

Tạo pipes/keys.tsvới nội dung:

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

Thêm vào app.module.ts(mô-đun chính của bạn):

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

và sau đó thêm vào mảng khai báo mô-đun của bạn một cái gì đó như thế này:

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

Sau đó, trong mẫu xem của bạn, bạn có thể sử dụng một cái gì đó như thế này:

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

Đây là một tài liệu tham khảo tốt tôi tìm thấy nếu bạn muốn đọc thêm.

Có một thư viện đẹp thực sự làm điều này trong số các đường ống đẹp khác. Nó được gọi là ngx-pipe .

Ví dụ, đường ống khóa trả về khóa cho một đối tượng và đường ống giá trị trả về giá trị cho đối tượng:

chìa khóa ống

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

ống giá trị

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

Không cần phải tạo đường ống tùy chỉnh của riêng bạn :)

Sử dụng chỉ mục:

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

Sử dụng:

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

Đây là giải pháp đơn giản

Bạn có thể sử dụng các trình vòng lặp typcript cho việc này

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

thay đổi loại demo thành mảng hoặc lặp qua đối tượng của bạn và đẩy sang mảng khác

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

và từ html:

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

Tôi nghĩ Object.keys là giải pháp tốt nhất cho vấn đề này. Đối với bất kỳ ai bắt gặp câu trả lời này và đang cố gắng tìm hiểu tại sao Object.keys lại cho họ ['0', '1'] thay vì ['key1', 'key2'], một câu chuyện cảnh báo - hãy coi chừng sự khác biệt giữa " của "và" trong ":

Tôi đã sử dụng Object.keys, một cái gì đó tương tự như thế này:

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

Tuy nhiên, thay vì

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

Tôi đã vô tình viết

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

Mà "làm việc" hoàn toàn tốt mà không có lỗi và trả lại

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

Điều đó làm tôi mất khoảng 2 giờ để googling và nguyền rủa ..

(tát trán)

bạn có thể lấy khóa của đối tượng động bằng cách thử

myObj['key']

Bây giờ bạn phải làm như thế này, tôi biết không hiệu quả lắm vì bạn không muốn chuyển đổi đối tượng bạn nhận được từ căn cứ hỏa lực.

    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;

    });