Angular проблема с панелью поиска - PullRequest
Новая
       28

Angular проблема с панелью поиска

0 голосов
/ 04 апреля 2020

Здравствуйте, я надеюсь, что вы хорошо, у меня есть компонент, который позволяет пользователям искать файлы по тегам, и я использую ngx-pagination для нумерации страниц. когда я на первой странице, я могу искать все файлы, но когда я перехожу на другую страницу, поиск всегда не учитывает предыдущую страницу, только метод поиска работает на следующих страницах. но он дает мне номер страницы с этим тегом.

но я хочу, чтобы он показал карточку с файлом. 2 фотографии ниже, чтобы прояснить ситуацию

my component.TS: 

export class AfficherComponent implements OnInit {
  SearchTag: String;
  files = [];
  constructor(private uploadService: UploadFileService) {}
  ngOnInit() {
    this.reloadData();
  }
  reloadData() {
    this.uploadService.getFilesList().subscribe((data) => {
      this.files = data;
    });
  }

  Search() {
    if (this.SearchTag != "") {
      this.files = this.files.filter((res) => {
        return res.tag
          .toLocaleLowerCase()
          .match(this.SearchTag.toLocaleLowerCase());
      });
    } else if (this.SearchTag === "") {
      this.ngOnInit();
    }
  }
}

my component. HTML

<div id="pricing-table" class="clear" data-aos="fade-right">
  <div class="sel">
    <div class="row">
      <div class="col" style="left: -160px;">
        <input
          type="text"
          placeholder="Search..."
          [(ngModel)]="SearchTag"
          (input)="Search()"
          style="margin: 20px;"
        />
        <div id="toggle" style="left: 450px;"></div>
      </div>
    </div>
  </div>

  <div
    class="plan"
    *ngFor="let file of files | paginate: { itemsPerPage: 3, currentPage: p }"
  >
    <h3></h3>
    <button class="btn" style="background-color: #09c0a3;">Ouvrir</button>
    <ul>
      <li><b>Name: </b> {{ file.nom }}</li>
      <li><b>Type: </b> {{ file.type }}</li>
      <li><b>Departement: </b>{{ file.departement }}</li>
      <li><b>Tag: </b>{{ file.tag }}</li>
    </ul>
  </div>
  <pagination-controls
    (pageChange)="p = $event"
    style="float: right;"
  ></pagination-controls>
</div>

, как вы видите этот тег на первой первой странице

на второй странице, он показывает мне страницу который содержит этот файл, но он не показывает сам файл

1 Ответ

0 голосов
/ 04 апреля 2020

docs заявляет, что существует событие с именем pageBoundsCorrection:

pageBoundsCorrection [event handler] Указанное выражение будет вызываться, когда * Установлено, что значение 1010 * выходит за пределы (например, размер коллекции был уменьшен). Аргумент $event будет номером ближайшей действительной страницы.

Поэтому вы должны обрабатывать это событие так же, как вы обрабатываете (pageChange).

Некоторые другие рекомендации :

  • Используйте отдельный массив для фильтрации. В настоящее время вы перезагружаете состояние, когда текст поиска пуст. Это делает больше работы, чем необходимо
  • Объявите свойство p вашего компонента, чтобы было ясно, что HTML использует его
  • Обрабатывает события с помощью функции-обработчика, а не добавляет лог c на HTML
  • Используйте includes вместо match в вашем фильтре (если вы не хотите обрабатывать регулярные выражения)

DEMO: https://stackblitz.com/edit/angular-hv5u5h

...