角管；对象数组和对象包括数组

如何解决角管；对象数组和对象包括数组

在自定义类似问题的答案失败后，很遗憾我需要一些帮助。

我正在尝试使用角管来过滤以下数据结构：

subjects = [
      { name: "subject1",keywords:["keyword1","keyword2","keyword3"]},{ name: "subject2",];

我尝试用一​​个简单的数据结构定制一个例子：

subjects = [ "subject","subject2"]

和以下管道：

@Pipe({
  name: 'SearchPipe'
})
export class FilterPipe implements PipeTransform {

  transform(value: any,input: any): any {
   if (input) {
     return value.filter(val => val.toLowerCase().indexOf(input.toLowerCase()) >= 0);
   } else {
     return value;
   }
  }
}

但不知道如何将其应用于我的用例。

目标是按关键字过滤数据并显示匹配的名称：

编辑： HTML 模板：

    <div class="welcome-content" fxFlex="80">
        <div class="search-container">
            <mat-form-field class="textfield" appearance="standard">
                <mat-label>z.B. Flugverspätung</mat-label>
                <input class="input" matInput [(ngModel)]=subject>
            </mat-form-field>
        </div>
        <div class="subject-container">
            <div class="subject-list">
                 <div class="subjects" *ngFor="let subject of subjects | SearchPipe: subject">
                    <div class="subject-wrapper">
                        <a mat-button class="control-button" (click)="goToChat(subject)">{{subject.name}}</a>               
                    </div>
                </div>
            </div>
        </div>
    </div>

我很感谢任何提示。

解决方法

查看您的实现，注意到 value 本身就是 ngFor 中给出的数组。使用当前数据结构完成任务的更好方法是：

transform(values: any[]) {
    return values.filter(value => {
        // Validates that has a keywords filter array
        if (value && value.name && value.keywords) {
            // If there's any matching,then return the value
            return value.keywords.some(kw => {
                return value.name.toLowerCase().indexOf(kw.toLowerCase()) >= 0;
            }) && value;
        } else {
            return value;
        }
    });
}

更新 1：

这是基于输入字段的快速更新。

首先，您使用了与 for 中相同的名称，没有错，但由于作用域的原因无法在管道中工作（请参阅它在管道旁边用作参数）。也就是说，您必须创建一个绑定到输入字段的字符串属性，我将其命名为 textSubject，您可以随意命名。

<input class="input" matInput [(ngModel)]="textSubject">
...
<div class="subjects" *ngFor="let subject of subjects | SearchPipe: textSubject">
    <div class="subject-wrapper">
        <a mat-button class="control-button" (click)="goToChat(subject)">{{subject.name}}</a>               
    </div>
</div>

因此，现在您必须在 transform 函数中拥有第二个参数，即输入的值（在本例中为 textSubject）。

transform(values: any[],input: string) {
    return values.filter(value => {
        if (value && value.keywords && input) {
            // If matches,then return the value
            return value.keywords.some(kw => {
                return input.toLowerCase().indexOf(kw.toLowerCase()) >= 0;
            });
        } else {
            return value;
        }
    });
}