如何使用角度

Question

我有以下的JSON對象顯示和過濾深嵌套的JSON：http://pastebin.com/1TguvZXc

我試圖訪問以下屬性爲每個型號，年份和樣式：Model.Model []年[] .Styles [] submodel.modelName

我嘗試：

<div *ngFor="let model of models?.models"> 
<div *ngFor="let submodel of model['years']['styles']"> 
    Test: {{ submodel.modelName}} 
</div> 
</div> 

這將返回沒有錯誤但它不顯示我的數據。

此外，我想使用ngx-pipes的unique管道過濾掉重複的modelName。

如何顯示submodel.modelName的唯一值？

以下代碼：

<div *ngFor="let model of models?.models | unique"> 
    <div *ngFor="let year of model['years']"> 
    <div *ngFor="let style of year['styles']"> 
     {{model.name}}, {{ style.submodel.body }} 
    </div> 
</div> 
</div> 

產生以下輸出：

2 Series, Coupe 2 Series, Coupe 2 Series, Convertible 2 Series, Convertible 2 Series, Convertible 2 Series, Coupe 2 Series, Convertible 2 Series, Coupe 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series, Wagon 3 Series, Sedan 3 Series, Sedan 3 Series, Wagon 3 Series, Sedan 3 Series, Sedan 3 Series, Sedan 3 Series Gran Turismo, Hatchback 3 Series Gran Turismo, Hatchback 4 Series, Convertible 4 Series, Convertible 4 Series, Convertible 4 Series, Convertible 4 Series, Coupe 4 Series, Coupe 4 Series, Coupe 4 Series, Coupe 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 4 Series Gran Coupe, Sedan 5 Series, Sedan 5 Series Gran Turismo, Hatchback 5 Series Gran Turismo, Hatchback 5 Series Gran Turismo, Hatchback 6 Series, Convertible 6 Series, Coupe 6 Series, Convertible 6 Series, Convertible 6 Series, Coupe 6 Series, Convertible 6 Series, Coupe 6 Series, Coupe 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 6 Series Gran Coupe, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan 7 Series, Sedan ALPINA B6 Gran Coupe, Sedan ALPINA B7, Sedan M2, Coupe M3, Sedan M4, Convertible M4, Coupe M6, Convertible M6, Coupe M6 Gran Coupe, Sedan X1, SUV X1, SUV X3, SUV X3, SUV X3, SUV X3, SUV X4, SUV X4, SUV X5, SUV X5, SUV X5, SUV X5, SUV X5, SUV X5 M, SUV X6, SUV X6, SUV X6, SUV X6 M, SUV i3, Hatchback i3, Hatchback i3, Hatchback i8, Coupe

這是很不理想。我想過濾數據，因此它是獨一無二的，就像這樣：

2 Series, Coupe 2 Series, Convertible 3 Series, Sedan 3 Series, Wagon 3 Series Gran Turismo, Hatchback 4 Series, Convertible 4 Series, Coupe 4 Series Gran Coupe, Sedan 5 Series, Sedan 5 Series Gran Turismo, Hatchback 6 Series, Convertible 6 Series, Coupe 6 Series Gran Coupe, Sedan 7 Series, Sedan ALPINA B6 Gran Coupe, Sedan ALPINA B7, Sedan M2, Coupe M3, Sedan M4, Convertible M4, Coupe M6, Convertible M6, Coupe M6 Gran Coupe, Sedan X1, SUV X3, SUV X4, SUV X5, SUV X5 M, SUV X6, SUV X6 M, SUV i3, Hatchback i8, Coupe

Answer 1

你的心智模型看起來是正確的（二線），但你ngFor，說自己。下面是什麼，我期望給你的JSON的形狀僞代碼：

// div ngFor="let model of models?.models" 
// div ngFor="let year of model.years" 
// div ngFor="let style of year.styles" 
// Test: {{ style.submodel | json }} 

在數據的形狀，展望了JSON格式可能會幫助（例如：http://jsonformatter.org/）。

Working example

---

編輯：如果您需要將濾鏡陣列，一種解決方案是一個自定義的管道。我更新了我的plnkr以包含一個示例。我將ngFor指令中的數組傳遞給管道，並使用哈希映射來過濾結果。在生產代碼中，我希望你會用更好的實現來替換createHashKey()函數的內部，以對獨特的例子進行分類。

模板摘錄：

<div *ngFor="let model of models?.models"> 
    <div *ngFor="let year of model.years"> 
    <div *ngFor="let style of (year.styles | myCustomPipe:'submodel')"> 
     Test: {{ style.submodel | json }} 
    </div> 
    </div> 
</div> 

自管：

@Pipe({ 
    name: 'myCustomPipe' 
}) 
export class MyCustomPipe implements PipeTransform { 

    transform(value: any[], ...args: string[]): any[] { 

    let hashMap = {}; 
    let filterKey = args[0]; 

    for (let v of value) { 
     const hashKey = createHashKey(v, filterKey); 
     hashMap[hashKey] = v; 
    } 
    return Object.values(hashMap); 
    } 

} 

function createHashKey(obj: any, filterKey: string): string { 
    // For demonstration purposes only: 
    return JSON.stringify(obj.filterKey); 
}