Jhipster & Angular Фильтр

Question

У меня есть проект, созданный на основе Spring-Boot Jhipster с Angular. В проекте есть персона лица. Я хочу знать, как фильтровать таблицу CRUD html по входам в поле имени.

Так что, если я введу в поле ввода "bob", я получу все имена, содержащие "bob". Похоже на этот вопрос . Этот фильтр должен получать данные со стороны сервера / сервера, а не только то, что отображается на текущей странице.

Я новичок в Angular, поэтому был бы полезен подробный ответ о том, какие файлы необходимо изменить. .

Фильтрация включена в jhipster. Я хочу, чтобы вход вызывал фильтр на стороне сервера.

Моя таблица выглядит следующим образом:

Я попытался добавить в свой html:

<th>
  <form [formGroup]="userForm" (ngSubmit)="onEnter()">
    <input type="text" class="form-control" formControlName="firstname">
    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
  </form>
</th>

В person.component.ts я создал метод для захвата события ввода:

  onEnter(): void {
  alert(JSON.stringify(this.userForm.value));
  this.personService.lastnameContains(this.userForm.value)
  }

И, глядя на person.service.ts, который имеет некоторые примеры для обновления, удаления найти, у меня есть этот метод:

  lastnameContains(lastname: string): Observable<EntityArrayResponseType> {
  return this.http
    .get<IPerson[]>(`${this.resourceUrl}?lastname.contains=${lastname}`, { observe: 'response' })
    .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
 }

URL-адрес, на который отправляется запрос должен быть:

"http://localhost: 8080 / api / people? lastname.contains = searchstring"

UPDATE

В службе существует сгенерированный метод запроса:

query(req?: any): Observable<EntityArrayResponseType> {
    const options = createRequestOption(req);
    return this.http
        .get<IPerson[]>(this.resourceUrl, { params: options, observe: 'response' })
        .pipe(map((res: EntityArrayResponseType) => this.convert1DateArrayFromServer(res)));
 }

Но похоже, что он не может направить запрос на правильный URL-адрес.

На приведенном выше рисунке показано, что код вызывается. Но на сервер вообще ничего не отправляется, не говоря уже о / api / person? Lastname = "somestring"

Как реализовать эту фильтрацию , Документы Jhispter в лучшем случае скудны.

Answer 1

Начните с включения фильтрации в jhipster согласно здесь .

Обратите внимание, что EntityQueryService, о котором говорилось в нижней части страницы в разделе Реализация, - это служба Spring, и это YourEntityNameQueryService.

Интерфейсная программа, добавленная в html, вот изменения кода, которые делают фильтр для фамилии. Содержит работу:

person.component. html

<th>
    <form [formGroup]="userForm" (ngSubmit)="onEnter()">
        <input type="text" class="form-control" formControlName="firstname">
        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
    </form>
</th>

В частности, я добавил [formGroup] = "userForm", который привязывает html к правильной модели (персона). Во входных тегах formControlName = "firstname" связывает входные данные с полем firstname объекта, а (ngSubmit) = "onEnter" означает, что данные передаются с помощью клавиши ввода. Вторым вводом является фантомная кнопка для захвата события Enter.

person.component.ts

import { IPerson } from 'app/shared/model/person.model';
import { ITEMS_PER_PAGE } from 'app/shared/constants/pagination.constants';
import { PersonService } from './person.service';
import { PersonDeleteDialogComponent } from './person-delete-dialog.component';
import { FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'jhi-person',
  templateUrl: './person.component.html'
})
export class PersonComponent implements OnInit, OnDestroy {
   userForm = new FormGroup({
   firstname: new FormControl('test')
})

Изменения, которые необходимо внести в person.component .ts are:

1. Добавлен импорт для FormGroup и FormControl;
2. Добавлена ​​новая FormGroup с именем FormControl;

Далее person.component.ts является обработчиком события ввода клавиши:

  onEnter(): void {
      alert(JSON.stringify(this.userForm.value));
      this.personService
        .query({'lastname.contains': 'wood'})
        .subscribe(
          (res: HttpResponse<IPerson[]>) => this.onSuccess(res.body, res.headers, -1),
          () => this.onError()
        );;
  }

Событие ввода вызывает метод personService.query, который автоматически генерируется при включении фильтрации jhispter ( см. здесь ). Этот метод запроса будет обрабатывать все запросы, сделанные в API для вас. Когда вы вызываете запрос, вы должны правильно построить параметры - в этом случае lastname.contains = wood, которая жестко запрограммирована для тестирования.

IPerson представляет модель интерфейса с человеком.

Answer 2

В вашем person.service.ts у вас должен быть метод query(req?: any). Если вы этого не сделаете, вы, вероятно, добавили фильтрацию по факту и не регенерировали свой шлюз (если вы работаете с микросервисной архитектурой).

Этот метод используется для фильтрации. Просто передайте свой фильтр как объект (JSON). Это также метод, который вы используете для нумерации страниц, если он включен. Если вы посмотрите на person.component.ts, вы увидите пример разбиения на страницы.

Примечание: я нахожусь на версии 6.1.2, поэтому ваш query метод может немного отличаться, но концепция по-прежнему то же самое.

Правка после снимков экрана: вы видите, как req="wood" должен равняться объекту, представляющему фильтр.