Jhipster & Angular 濾波器

Question

我有一個基於 Spring-Boot 的 Jhipster 生成的項目，其中包含 Angular。 在項目中是一個 Person 實體。 我想知道如何在名字字段的輸入上過濾 html CRUD 表。

因此，如果我輸入輸入“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 ”

更新

服務中有一個生成的查詢方法：

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 中啟用過濾。

注意，頁面底部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 綁定到正確的 model （人）。 輸入標簽中formControlName="firstname" 綁定了輸入實體的firstname 字段，(ngSubmit)="onEnter" 表示數據是通過回車鍵提交的。 第二個輸入是一個幻像按鈕，用於捕獲 Enter 事件。

人.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 進行的更改是：

1. 添加了 FormGroup 和 FormControl 的導入；
2. 添加了名字為 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 方法（請參見此處）。 此查詢方法將為您處理對 API 的所有請求。 當您調用查詢時，您必須正確構造參數 - 在這種情況下 lastname.contains=wood 是硬編碼用於測試的。

IPerson 表示與人 model 的接口。

Answer 2

在您的person.service.ts中，您應該有一個方法query(req?: any) 。 如果你不這樣做，那么你可能在事后添加了過濾，並且你沒有重新生成你的網關（如果你正在做一個微服務架構）。

這是您用於過濾的方法。 只需將您的過濾器作為 object (JSON) 傳遞。 如果您啟用了它，它也是您用於分頁的方法。 如果您查看person.component.ts ，您會看到一個分頁示例。

注意：我是6.1.2版本，所以你的query方法可能會略有不同，但概念還是一樣的。

在您的屏幕截圖后編輯：您會看到req="wood" ，它應該等於代表過濾器的 object 。