Angular 2：按嵌套数组中的值进行过滤？

我一直在通过Raynda Villalobos上的Lynda.com（https://github.com/planetoftheweb/learnangular）这个GitHub回购实验 - 它的功能类似于我希望构建的基本Web应用程序，但我最近打了一下的路障。Angular 2：按嵌套数组中的值进行过滤？

在这回购上面链接，在应用程序/ component.app.ts，是以下的数组：

var ARTISTS: Artist[] = [ 
    { 
    "name": "Barot Bellingham", 
    "shortname": "Barot_Bellingham", 
    "reknown": "Royal Academy of Painting and Sculpture", 
    "bio": "Some bio here." 
    }, 
    // etc... 
]

此阵列由管过滤，如应用程序/ pipe.search.ts看出：

export class SearchPipe implements PipeTransform { 
    transform(pipeData, pipeModifier) { 
    return pipeData.filter((eachItem) => { 
     return eachItem['name'].toLowerCase().includes(pipeModifier.toLowerCase()) || 
     eachItem['reknown'].toLowerCase().includes(pipeModifier.toLowerCase()); 
    }); 
    } 
}

这里的滤波器输入：

<input class="search-input" [(ngModel)]="field1Filter" placeholder="type in search term here" (click)="showArtist(item); field1Filter=''">

而且代码过滤结果：

<ul class="artistlist cf" *ngIf="field1Filter"> 
    <li class="artistlist-item cf" 
    (click)="showArtist(item);" 
    *ngFor="let item of (artists | search: field1Filter)"> 
    <artist-item class="content" [artist]=item></artist-item> 
    </li> 
</ul> 
<artist-details *ngIf="currentArtist" [artist]="currentArtist"></artist-details>

这一切都完美的作品，但是，在我的项目，我需要包括三个嵌套的数组，并有基于这些阵列过滤的值的能力。我需要看起来像这样的类型的数组的一个示例：

var ARTISTS: Artist[] = [ 
    { 
    "name": "Barot Bellingham", 
    "shortname": "Barot_Bellingham", 
    "reknown": "Royal Academy of Painting and Sculpture", 
    "bio": "Some bio here...", 
    "friends": [ 
     "James", 
     "Harry", 
     "Bob", 
     "Liz", 
     "Kate", 
     "Jesse" 
    ], 
    "emails": [ 
     "[email protected]", 
     "[email protected]" 

    ], 
    "car": [ 
     "honda", 
     "scion", 
     "aston martin" 
    ] 

    }, 
    // etc... 
]

因此，我希望能在“哈利”，以及包含“哈利”仅显示对象在任何过滤“名”，“名望，“朋友”，“电子邮件”或“汽车”。这是可能的，如果是这样，我如何编辑管道过滤器来做到这一点？谢谢！！

（我敢绿色在一般的角度和JS，所以我想，如果我使用了不正确的术语或忽略/误解基本的东西提前道歉。）

来源

2017-06-22 Boosman

我删除了我以前的答案，因为它比有帮助更令人困惑。我粘贴了示例代码，但没有将其应用到变量/属性/对象，这是误导性的。让我们再试一次：

export class SearchPipe implements PipeTransform { 
    transform(pipeData, pipeModifier) { 
    pipeModifier = pipeModifier ? pipeModifier.toLowerCase() : null; 
    return pipeModifier ? pipeData.filter(eachItem => { 
     eachItem['name'].toLowerCase().indexOf(pipeModifier) !== -1 || 
     eachItem['reknown'].toLowerCase().indexOf(pipeModifier !== -1) : pipeData; 
    }); 
    } 
}

的代码转换方法的第一行确保传入的修改也小写，这样比较总是比较低的情况下的值。它也有一个空检查，以确保它不会尝试如果它为空就将其小写。

第二行代码也使用“？”语法来处理null pipeModifier的情况。

我将includes更改为indexOf。 Includes检查数组。这些项目，比如eachItem ['name']，是一个数组吗？

这应该更接近。

注意：没有提供的plunker ...我没有检查此代码的语法或正确执行。

来源

2017-06-23 23:40:07 DeborahK

非常感谢您的持续帮助和解释，DeborahK！我会在一天左右的时间内制造一名运动员。但是，我已经使用了您的修改后的代码，但它阻止了应用程序的加载，而我无法弄清楚为什么（控制台说意外的分号）。请参阅[控制台错误截图（imgur.com]（http://imgur.com/a/l4p87）。当我使用我的问题中提供的过滤器时，不会触发这个功能。再次感谢！ – Boosman

是否显示其他错误？这是一个副作用，而不是实际的错误 – DeborahK

不，这是控制台中显示的唯一错误，它阻止了应用程序的加载。“正在显示，这就是我的''标记里面的内容 – Boosman

Angular 2：按嵌套数组中的值进行过滤？

回答

相关问题