Question

我在使用Angular在表中实现具有自动完成功能的搜索框时遇到了麻烦。在我的表中，我呈现了从后端使用API服务从数据库中获取的数据。我需要在表上实现具有自动完成功能的简单搜索框功能，以在键入时过滤出值。我需要对当前的实现方式进行任何修改？

这是我到目前为止的实现：

<form class="form-inline" action="#">
    <div class="row">
      <div class="col-sm-3" style="margin-left: 80%;">
        <button type="button" class="btn btn-success" (click)="deactivateUser()" style="width: 150px;">Deactivate
          User</button>
      </div>
    </div>
  </form>
  <hr />

      <div id="table-wrapper">
    <div id="table-scroll">
      <table class="table table-sm m-b-0 ">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Deactivate</th>
            <th scope="col">Username</th>
            <th scope="col">User Group</th>
            <th scope="col">Date Added</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of users; let i = index">
            <td>{{i+1}}</td>
            <td>
              <input type="checkbox" [(ngModel)]="user.isActive" 
[ngModelOptions]="{standalone: true}">
            </td>
            <td>{{user.fullName}}</td>
            <td>{{user.groupName}}</td>
            <td>{{user.createdAt}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

ts：

getUsersToVerify() {
  this.initApproval();
this.users = [];
this.apiSvc.getUsersToDeactivate().subscribe(data => {
  this.response = data;
  this.arrs = this.response.collection;
  console.log('users to deactivate', this.arrs);
  if (this.arrs.length > 0) {
    for (let i = 0; i < this.arrs.length; i++) {
      const user = {
        userId: this.response.collection[i].id,
        fullName: this.response.collection[i].fullName,
        groupName: this.response.collection[i].groupName,
        counter: this.response.collection[i].counter,
        createdAt: this.response.collection[i].createdAt,
        createdBy: this.response.collection[i].createdBy,
        isActive: false
      };
      this.users.push(user);
    }
    this.users.sort((a, b) => a.counter > b.counter);
    console.log('reponse', this.users);
  } else {
    return this.toastr.warning(this.response.respMessage, 'Alert!', { 
timeOut: 1500 });
  }

});

}

角表内的自动完成搜索

0 个答案: