小编S.A*_*.A.的帖子

Angular:TypeScript 表中的搜索栏

我已经完成了一个简单的 CRUD 应用程序,现在我必须添加一个搜索栏来过滤我的表格并向我显示与我数字相同的行。

我不知道在我的组件中做什么,我看到了管道和过滤器的不同东西,但我无法将它们调整到我的项目中。

我想知道是否有一种方法可以在不创建新方法的情况下实现到我的 component.ts。

组件.HTML

<div class="container">
  <ul class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-4">
          <button *ngIf="metadata && metadata.addMD" (click)="addFunc(metadata)">{{metadata.addMD.label}}</button>
          <div class="show-entries">
            <span>Show</span>
            <label>
              <select [(ngModel)]="pageSize">
                <option *ngFor="let maxPerPage of rowsOnPageSet"
                        (click)="maxElements(maxPerPage)">{{maxPerPage}}</option>
              </select>
            </label>
            <span>users</span>
          </div>
        </div>

        <div class="col-sm-4">
          <h2 class="text-center">Users <b>Details</b></h2>
        </div>

        <div class="col-sm-4">
          <div class="search-box">
            <div class="input-group">
              <span class="input-group-addon"><i class="material-icons">&#xE8B6;</i></span>
--> //HERE I HAVE TO ADD THE FUNCTION OR SOMETHING ELSE
             <input type="text" class="form-control" [(ngModel)]="searchVal"
                 (ngModelChange)='checkSearchVal()'  placeholder="Search&hellip;">
            </div>
          </div>
        </div>
      </div>
    </div>

    <table class="table table-bordered">
      <thead> …
Run Code Online (Sandbox Code Playgroud)

html javascript typescript angular angular-ngmodelchange

3
推荐指数
1
解决办法
1万
查看次数