13

私は掘り下げていて、次を使用してオブジェクトに対して *ngFor を使用できることがわかりました。

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

*ngFor ディレクティブからアクセスできるように、「propertyA」と「propertyB」を抽出する方法がよくわかりません。何か案は？

アップデート

私がやりたいことは、次の HTML を表示することです。

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

propertyA何かがandと等しい場合propertyB(これがオブジェクトの構造です)。したがって、これは次のようになります。

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

5 に答える 5

17

または、パイプを作成してオブジェクトを *ngFor に渡す代わりに、単に *ngFor にObject.keys(MyObject)渡します。パイプと同じように戻りますが、面倒なことはありません。

TypeScript ファイル:

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

テンプレート (html):

*ngFor="let item of list"
于 2017-05-13T04:58:01.790 に答える
16

アップデート

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>

プランカーの例

前のバージョン

あなたはこのようなことを試すことができます

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>

プランカー

于 2016-05-05T09:22:38.493 に答える
14

値の代わりにパイプからキーを返し、キーを使用して値にアクセスします。

( beta.17 のlet代わりに)#

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

@Component({
    selector: 'my-app',
    pipes: [ObjNgFor],
    template: `
    <h1>Hello</h1>
 <div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div>    `,
})
export class AppComponent {
  objs = {
    "propertyA":{
      "description":"this is the propertyA",
      "default":"sth"
    },
    "propertyB":{
      "description":"this is the propertyB",
      "default":"sth"
    }
  };
}

プランカーの例

Angular2 の列挙型に基づいて選択するも参照してください。

于 2016-05-05T09:14:14.730 に答える