質問

を取得する方法について、少し混乱しています。 key と value を使用しながら、angular2 のオブジェクトの *ngFor を使用して、オブジェクトを反復処理することができます。angular 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 ? いろいろと検索した結果、パイプを使うというアイデアを見つけたのですが、どうすればいいのかわかりません。 Angular2で同じことを行うための組み込みパイプはありますか？

どのように解決するのですか？

のように Angularの最新リリース(v6.1.0) Angular Teamは、同じ名前の新しいビルトインパイプを追加しました。 keyvalue パイプを使用すると、オブジェクト、マップ、および配列を反復処理することができます。 common モジュールがあります。 例えば

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

元の順序を維持するには keyvalue:onCompare ,
で、コンポーネントでコールバックを定義します。

// ...
import {KeyValue} from '@angular/common';

@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
    return -1;
  }
}

作業分担例

より有用な情報はこちらをご覧ください。

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

Angular v5以下を使用している場合、またはパイプを使用して実現したい場合は、次の回答に従ってください。

• ngforを使用してオブジェクトのキーと値にアクセスします。