ngFor 来自对象？ [复制]答案

【问题标题】：ngFor from object? [duplicate]ngFor 来自对象？ [复制]
【发布时间】：2017-07-06 10:30:26
【问题描述】：

我正在使用 Ionic 2 / Angular，但我意识到 ngFor 函数无法读取对象。另外，只有在cart 不为空时才需要显示它。

对象：

{
    "48131": {
        "code":"D40905",
        "name":"ДАМСКА ПЛЕТЕНА БЛУЗА КЪС РЪКАВ ЩАМПА REASON",
        "price":"18.99",
        "size":"STANDART",
        "qty":"1"
    },
    "49410": {
        "code":"D41821",
        "name":"ДАМСКА БЛУЗА ТРИКО",
        "price":"44.99",
        "size":"M",
        "qty":"4"
    }
}

HTML：

<ion-row *ngFor="let p of cart">
    <ion-col col-3>
        <div><img src="http://example.com/products/small/{{p.code}}-1.jpg" /></div>
    </ion-col>
    <ion-col col-9>
        <ion-row>
            <ion-col col-12>
                <div>{{p.name}}</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12>
                <div>{{p.qty}} бр ({{p.size}} размер) x <b>{{p.price}} лв</b></div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12>
                <div (click)="deleteCart({{p.id}})">Изтрий <ion-icon name='trash' item-start color="danger"></ion-icon></div>
            </ion-col>
        </ion-row>
    </ion-col>
</ion-row>

有人可以帮我解决这个问题吗？我已经尝试了很多东西......

【问题讨论】：

你能展示一下购物车对象的样子吗？好像不是数组。
是重复导入 { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keys' }) 导出类 KeysPipe 实现 PipeTransform { transform(value): any { if(!value) return null;返回 Object.keys(value); } }
{{member[key]}}

标签： angular ionic-framework ionic2

【解决方案1】：

你可以使用 Pipe 来达到这个目的

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

@Pipe({
  name: 'object' 
})
export class ObjectForPipe implements PipeTransform {
    transform(value: any, arg1): any {
        return typeof value!=='object' ? [] : Object.keys(value);
    }
}

在 AppModule 中 -> @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ObjectForPipe } from 'path-to-pipe/object.pipe.ts';

@NgModule({
  declarations: [
    AppComponent,
    ObjectForPipe
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML

<div *ngFor="let key of objs | object">

从 6.1 版本开始，Angular 引入了 keyValue Pipe：

<div *ngFor="let item of map | keyvalue">
   {{item.key}}:{{item.value}}
</div>

【讨论】：

我试过@Pipe，但总是出错。这次 - @Pipe/@Directive/@Component annotation.。当我在 ngModule 中添加它时，我收到同样的错误。
我已经编辑了我的答案，你需要做的就是让它工作。
谢谢！现在我收到错误Uncaught (in promise): TypeError: Cannot convert undefined or null to object。这很奇怪，因为我看到该对象已定义。

【解决方案2】：

您的卡片 json 不是数组。应该是

[
    "48131": {
        "code":"D40905",
        "name":"ДАМСКА ПЛЕТЕНА БЛУЗА КЪС РЪКАВ ЩАМПА REASON",
        "price":"18.99",
        "size":"STANDART",
        "qty":"1"
    },
    "49410": {
        "code":"D41821",
        "name":"ДАМСКА БЛУЗА ТРИКО",
        "price":"44.99",
        "size":"M",
        "qty":"4"
    }
]

【讨论】：

键、值对在数组中无效。
好棒！！！！！！

【解决方案3】：

根据此链接将您的 json 对象转换为数组

https://stackoverflow.com/a/37667589/2013245

那你应该没事。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
说得好。已更正。