在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>

此页面如下所示：

​

我想添加一个搜索按钮在这个标题后弹出的顶部。我希望根据类型为String的客户ID来优化此列表。但是，主键是long类型的ID，未显示。后台属性Auto的ID为@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));
}

考虑到您对数据类型(字符串与数值类型)的担忧，我怀疑过滤器应该是这样的。最后，numbers拥有(坦率地说，一切都有)可用的.toString()方法，这样您就可以将输入的过滤器文本与客户ID进行比较。

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

编辑:仅当焦点被移除(从文本框中单击)或按回车键时，才会触发(change)事件。如果要在键入时进行过滤，请切换到(keyup)。

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