Question

我知道Angular 2已经很老了，但是我使用了我们库中最好的课程，但是大多数课程仍然有效...

我在json文件中有一个数据列表，看起来像这样：

    {
        "name"          :"example one",
        "source"        :"",
        "source_type"   :"",
        "text"          :"A bumblebee in the field"
    },
    {
        "name"          :"example two",
        "source"        :"",
        "source_type"   :"",
        "text"          :"Two flowers with red petals"
    },

我可以显示整个名称列表，也可以访问其他数据。现在，我想要一个文本字段，以便用户可以搜索。我想要一个名称搜索选项和一个文本搜索选项（即使文本不直接显示）。问题是：我希望用户能够搜索单个单词（例如“ one”）并获得所有包含单词“ one”的结果。

这可能吗？还是我会更好地学习如何在线建立数据库并从那里实现搜索选项？

Answer 1

这可能会让您想到使用filter

进行搜索的想法

var searchText = "three";
    var data = [
      {
        name: "example one three",
        source: "",
        source_type: "",
        text: "A bumblebee in the field"
      },
      {
        name: "example two",
        source: "",
        source_type: "",
        text: "Two flowers with red petals"
      },
      {
        name: "example three",
        source: "",
        source_type: "",
        text: "Two flowers with red petals"
      }
    ];

    let newObj = data.filter((value)=>{
      return value.name.indexOf(searchText) != -1 ? value : null
    });
    console.log(newObj);

Answer 2

好吧，您可以使用管道来执行此操作。但是，Angular团队并没有真正建议使用过滤器管道。因此，您基本上可以在输入字段上监听keyup事件，然后调用一个函数来过滤数据。

现在，由于这是按键进行严格筛选的对象，因此您可以简单地在filter上使用Array方法，并检查indexOf中的searchInput name或text是>-1

方法如下：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  filterText;

  data = [{
    "name": "example one",
    "source": "",
    "source_type": "",
    "text": "A bumblebee in the field"
  },
  {
    "name": "example two",
    "source": "",
    "source_type": "",
    "text": "Two flowers with red petals"
  }];

  filteredData = [];

  ngOnInit() {
    this.filteredData = [...this.data];
  }

  onChange() {
    console.log('ran');
    this.filteredData = this.data.filter(
      datum => (datum.name.indexOf(this.filterText) > -1 || datum.text.indexOf(this.filterText) > -1));

    console.log(this.filteredData);

  }


}

在模板中：

<input type="text" [(ngModel)]="filterText" (keyup)="onChange()">

<ul>
  <li *ngFor="let datum of filteredData">
    {{ datum.name }}
  </li>
</ul>

这是您推荐的Sample StackBlitz。

使用Angular 2搜索json文件

2 个答案: