在 Angular Spring Boot 应用程序中添加搜索按钮

Question

我有以下 HTML 文件来显示一些值：

<h1 mat-dialog-title color="primary">
    License Details
</h1>
<mat-dialog-content >
        <div style="width:100%;display: flex;flex-direction: column;">
            
        </div>
</mat-dialog-content>
<mat-dialog-content>
<div class="example-container mat-elevation-z8">

    <table mat-table [dataSource]="customerList" class="a">

        <ng-container matColumnDef="Customer ID" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-size:15px;"><strong>Customer Id*</strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> {{element.customerId}} </td>
        </ng-container>

        <ng-container matColumnDef="Hardware Key" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-size:15px;"><strong>Hardware Key</strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> <textarea rows="2" cols="20" wrap="hard">{{element.hardwareKey}}</textarea> </td>
        </ng-container>

        <ng-container matColumnDef="Product" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>Product</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.product}} </td>
        </ng-container>

        <ng-container matColumnDef="MSAN" margin-right:10px margin-left:10px> 
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>MSAN</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.msan}} </td>
        </ng-container>

        <ng-container matColumnDef="CPE" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>CPE</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.cpe}} </td>
        </ng-container>

        <ng-container matColumnDef="Service Connections" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>Service Connections</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.serviceConnections}} </td>
        </ng-container>

        <ng-container matColumnDef="License Key" margin-right:10px margin-left:5px>
                <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;" class="customtd"><strong>License Key</strong></th>
                <td mat-cell *matCellDef="let element"> <textarea rows="2" cols="20" wrap="hard" [readonly]="!editable">{{element.licenseKey}} </textarea></td>
        </ng-container>

        <ng-container matColumnDef="Actions" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;" class="customtd"><strong>Actions</strong></th>
                 <td mat-cell *matCellDef="let element">
                   <button type="button" style="margin-left:5px" (click)="deleteLicense(element.id)">Delete</button>
                   <button type="button" style="margin-left:5px" (click)="openMxkLicenseDetailsDialog()">Update</button>
                   <button type="button" style="margin-left:5px" (click)="copyLicenseToClipboard(element.licenseKey)" class='btn btn-primary'>Copy License Key</button>
                 </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>
</mat-dialog-content>
<br>
<br>
<br>
<strong>* Customer ID might not be present for some products.</strong>
<mat-dialog-actions align="end">
    <button mat-button mat-raised-button mat-dialog-close cdkFocusInitial color="warn">Close</button>
</mat-dialog-actions>

此页面如下所示：

我想在此弹出窗口顶部的标题后添加一个搜索按钮。我想根据字符串类型的客户 ID 优化此列表。但是，主键是 long 类型的 ID，未显示。 ID 是后端属性 Auto 的 @GeneratedValue。我尝试了以下代码，但无法正确实现：https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts

为此的 Component.ts 文件是：

@Component({
  selector: 'customer-list-dialog',
  templateUrl: 'customer-list-dialog.html',
})

export class CustomerListDialog implements OnInit {
  customerList : any;
  isupdated = false;
  displayedColumns: string[] = ['Customer ID', 'Hardware Key', 'Product', 'MSAN', 'CPE', 'Service Connections', 'License Key', 'Actions'];
  constructor(
    public dialogRef: MatDialogRef<AddProductDialog>,
    private generateLicenseService: GeneratelicenseService,
    @Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    console.log("before the call : "+this.customerList);
    if(this.customerList === undefined) {
      this.generateLicenseService.getCustomerDetails()
      .subscribe((data) => {
        this.customerList = data;
        //console.log("after the call : "+this.customerList);
      });
    }

  }

service.ts 部分是：

getCustomerDetails() {
    let headers = new HttpHeaders({
      'Content-Type': 'application/json'
    })

    let options = {headers:headers, observer: 'response'};
    let result : Observable<Object> = this.http.get(this.url+'/customer/licenses',options);
    return result;
  }

Answer 1

如果我正确理解了您的问题，您只需要一个类似于您提供的链接的简单文本过滤器吗？

我建议最简单的做法是将table 的输入数据源从customerList 更改为filteredCustomerList。

在您的组件中，在收到您的客户列表并将其保存为customerList 后，还将其另存为另一个变量filteredCustomerList。

添加最新的搜索输入文本框，例如：

<input type="text" [(ngModel)]="filterText" (change)="onFilterChange()">

然后，您可以更改 filteredCustomerList 的内容 - 将原始的 customerList 保留为数据源，以在后台进行过滤，否则将保持不变。例如：

public onFilterChange(): void {
  if (!this.filterText || this.filterText.length === 0) {
    this.filteredCustomerList = this.customerList;
    return;
  }

  this.filteredCustomerList = this.customerList.filter(x => x.customerId.toString().includes(this.filterText));
}

考虑到您对数据类型（字符串与数字类型）的担忧，我怀疑过滤器会看起来像这样。归根结底，数字有（坦率地说，一切都有）.toString() 方法可用，因此您可以将输入的过滤器文本与客户 ID 进行比较。

这应该具有根据输入的过滤器文本更改输入数据源的预期效果。

编辑：(change) 事件仅在焦点被移除（点击离开文本框）或您按下回车时触发。如果您想在键入时进行过滤，请切换到 (keyup)。

上述机制工作的快速示例 - StackBlitz