Я знаю, что 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"
    },

Я могу отобразить весь список имен, а также получить доступ к другим данным. Теперь я хочу иметь текстовое поле, чтобы пользователь мог искать. Мне нужен вариант поиска по имени и один для текста (даже если текст не отображается напрямую). Проблема в следующем: я бы хотел, чтобы пользователи могли искать отдельные слова, например «один», и получать все результаты, содержащие слово «один».

Это возможно? Или мне было бы лучше узнать, как настроить базу данных в Интернете и реализовать оттуда опцию поиска?

0
K Kiek 8 Окт 2018 в 14:02

2 ответа

Лучший ответ

Это может дать вам представление о поиске с использованием 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);
0
Ali Shahbaz 8 Окт 2018 в 11:13

Что ж, вы могли бы сделать это с помощью трубы. Но команда Angular не рекомендует использовать Filter Pipes. Таким образом, вы можете прослушивать событие keyup в вашем поле ввода, а затем вызывать функцию для фильтрации данных.

Теперь, поскольку это объект строгой фильтрации по ключу, вы можете просто использовать метод filter для Array и проверить, если indexOf searchInput в {{X4 }} или 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>

Вот Образец StackBlitz для вашего исх.

0
SiddAjmera 8 Окт 2018 в 11:22