Jhipster 和角度过滤器答案

【问题标题】：Jhipster & Angular FilterJhipster 和角度过滤器
【发布时间】：2020-07-28 06:51:03
【问题描述】：

我有一个基于 Spring-Boot 的 Jhipster 使用 Angular 生成的项目。在项目中是一个 Person 实体。我想知道如何在名字字段的输入中过滤 html CRUD 表。

所以如果我输入“bob”，我会得到所有包含“bob”的名字。类似于此question。这个过滤器应该从后端/服务器端获取数据，而不仅仅是当前页面上显示的内容。

我是 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 中我创建了一个方法来捕获 enter 事件：

  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”

更新

服务中有一个生成的查询方法：

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 文档充其量是很少的。

【问题讨论】：

这很正常，person 可能是由表体中的*ngFor 定义的，并且您是从行循环之外的表头中引用它。目前尚不清楚您是要过滤客户端还是服务器端。对于服务器端，JHipster 有 JPA 实体过滤，见jhipster.tech/entities-filtering
@GaëlMarziou - 谢谢。我已经更新了问题。如果您能够重新查看答案，请？
然后使用jhipster.tech/entities-filtering 并修改您的用户界面以添加搜索表单。如果您的输入在 ngFor 之外，那么它们必须引用您的组件中定义的变量。有很多关于如何做到这一点的教程。
在您的组件中构建一个响应式表单并将其绑定到您在模板中的输入，请参阅angular.io/guide/reactive-forms
@Al-Grant - 这不是 React，它是“反应式”……这是一种编码范式。

标签： java angular spring-boot jhipster

【解决方案1】：

在您的person.service.ts 中，您应该有一个方法query(req?: any)。如果您不这样做，那么您可能在事后添加了过滤，并且您没有重新生成网关（如果您正在执行微服务架构）。

这是您用于过滤的方法。只需将您的过滤器作为对象 (JSON) 传递。如果您启用了它，它也是您用于分页的方法。如果您查看person.component.ts，您会看到一个分页示例。

注意：我使用的是 6.1.2 版本，因此您的 query 方法可能略有不同，但概念仍然相同。

在截屏后编辑：你看req="wood"，它应该等于一个表示过滤器的对象。

【讨论】：

你能扩展这个答案吗？从我的更新中看到，我尝试使用硬编码字符串到姓氏的查询方法，但它什么也没做。甚至没有看到网络请求。
您确定正在调用该方法吗？没有理由（从我们所见）不应该发送请求。除非它出错了。 this.convert1DateArrayFromServer(res) 是做什么的？您正在使用哪个版本的 jHipster？在 6.1.2 中，http.get() 的结果不经过转换而返回。如果pipe() 是您添加的东西，或者 jHipster 做了什么，那我就知道了。但是，从您之前遇到的错误来看，它似乎正在将 http.get() 返回的数据更改为与方法签名所期望的不同的数据。

【解决方案2】：

首先按照here 在 jhipster 中启用过滤。

注意页面底部Implementation下讲的EntityQueryService是Spring服务，是YourEntityNameQueryService。

前端的东西，从 html 开始，这里是使 lastname.contains 上的过滤器起作用的代码更改：

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 进行的更改是：

为 FormGroup 和 FormControl 添加了导入；
添加了名字为 FormControl 的新 FormGroup；

再往下 person.component.ts 是 Enter 键事件的处理程序：

  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()
        );;
  }

enter 事件调用启用 jhispter 过滤时自动生成的 personService.query 方法 (see here)。此查询方法将为您处理对 API 的所有请求。当您调用查询时，您必须正确构造参数 - 在本例中，lastname.contains=wood 是硬编码用于测试的。

IPerson 代表接口到人模型。

【讨论】：