Question

我一直在通过Ray Villalobos的Lynda.com（https://github.com/planetoftheweb/learnangular）课程试验这个GitHub回购 - 它的功能类似于我希望建立的基本网络应用程序，但我'我最近遇到了一些障碍。

在上面链接的repo中，在app / component.app.ts中，是以下数组：

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

此数组由管道过滤，如app / 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": [
      "bb@this.com",
      "aa@this.com"

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

  },
  // etc...
]

因此，我希望通过“Harry”过滤，并且只显示“名称”，“已知”，“朋友”和“电子邮件”中包含“哈里”的对象，＆＃34;或者＆＃34;汽车。＆＃34;这是可能的，如果是这样，我如何编辑管道过滤器来执行此操作？谢谢!!

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

Answer 1

我删除了之前的答案，因为它更有说服力而不是有用。我粘贴了示例代码，但未将其应用于您的变量/属性/对象，这是误导性的。让我们再试一次：

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

transform方法中的第一行代码确保传入的修饰符也是小写的，以便compare总是比较小写值。它还有一个空检查，以确保它不会尝试小写它，如果它是null。

第二行代码也使用＆＃34;？＆＃34;用于处理null pipeModifier的语法。

我将includes更改为indexOf。 Includes检查数组。这些项目，例如eachItem [＆＃39; name＆＃39;]，是否为数组？

那应该更接近。

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

Angular 2：在嵌套数组中按值过滤？

1 个答案: