ngFor從對象？

我正在使用Ionic 2/Angular，但我意識到ngFor函數無法讀取對象。此外，我需要它僅在cart不爲空時顯示。ngFor從對象？

對象：

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

有人可以幫助我？我試過這麼多的事情......

來源

2017-07-06 Samurai Labs

可以顯示購物車對象的外觀嗎？似乎不是一個數組。 –

是從'@ angular/core'重複導入{Pipe，PipeTransform}; @Pipe（{name：'keys'}） export class KeysPipe implements PipeTransform { transform（value）：any如果（！value）返回null; return Object.keys（value）; } }

– Arun

您可以使用管道用於這一目的

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

編輯

來源

2017-07-06 10:35:05

我試過'@ Pipe'，但是我總是得到錯誤。這一次 - 「@ Pipe/@ Directive/@ Component註釋」。當我在ngModule中添加它時，我收到了同樣的錯誤。 –

我編輯了我的答案，你需要做的所有工作。 –

謝謝！現在，我得到錯誤'未捕獲（承諾）：TypeError：不能將undefined或null轉換爲object'。這很奇怪，因爲我看到該對象已被定義。 –

您的ca rd json不是數組。它應該是

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

來源

2017-07-06 10:37:49 Mankeomorakort

鍵，值對在數組中無效。 – SaiUnique

-1

基於此鏈接

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

那麼你應該罰款的轉換你的JSON對象的數組。

來源

2017-07-06 10:40:36 ashley

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供參考鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/16630149） – iehrlich

說得好。糾正。 – ashley

回答

相關問題