Question

我有一个搜索页面，在其中我给用户3个选项来搜索客户记录。用户可以按客户ID，名字或姓氏进行搜索。

HTML代码：

 <div class="row" *ngIf="indCust">
      <!-- Search Records by Id -->
      <div class="text-input">
        <input type="text" placeholder="Customer Id" [(ngModel)]="customerIdValue" />
        <label (click)="searchByCustomerIdGraph()">Search</label>
      </div>

      <!-- Search Record by Individual Customer First Name -->
      <div class="text-input">
        <input type="text" placeholder="Customer First Name" [(ngModel)]="firstNameValue" />
        <label (click)="searchByFirstName()">Search</label>
      </div>

      <!-- Search Recod by Individual Customer Last Name -->

      <div class="text-input">
        <input type="text" placeholder="Customer Last Name" [(ngModel)]="lastNameValue" />
        <label (click)="searchByLastName()">Search</label>
      </div>
    </div>

在后端，我调用api并获取所有匹配的记录，并将它们显示在mat-table中。

我想知道如何合并名字和姓氏，然后搜索匹配的记录？我可以在FrontEnd上实现它还是需要后端团队制作一个带有两个参数的API，然后搜索记录。

Answer 1

您已经在HTML模板中为每个输入值设置了ngModel，因此对于REST调用设置为concat，您可以在组件上执行此操作：

// app.component.ts

searchByFullName() {
  this.svc.filterFunction(this.firstNameValue + ' ' + this.lastNameValue).subscribe(response => {
    // update the table
  });
}

您必须使用正确的函数更新svc调用并更新表更新逻辑。您还必须指定如何将名称串联在一起。在以上示例中，我只是在它们之间添加了一个空格。

如何连接两个字符串并搜索记录

1 个答案: