如何使用角度

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