Question

我从数据库中提取数据并使用简单的表格显示它。我想要做的是在此表中添加一个简单的表过滤器搜索栏功能。例如，通过.name属性过滤它。 case courseData是数组。

<table  style="border-spacing: 5rem">
      <tr >
          <td style="font-size: 20px;">CRN</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Name</td>
          <pre> </pre>
          <td style ="font-size: 20px;" >Lecturer</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Level</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Days</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Time</td>



          </tr>
    <ng-container *ngFor="let data of courseData">
      <tr>
        <td style="text-decoration: underline;" (click)="crnClicked(data.crn)">{{data.crn}}</td>
        <pre> </pre>
        <td *ngIf="data.specialapp !=1" >{{data.name}}</td>
        <td style="font-weight: bold;"*ngIf="data.specialapp==1" >{{data.name}}</td>
        <pre> </pre>
        <td>{{data.lecturer}}</td>
        <pre> </pre>
        <td>{{data.level}}</td>
        <pre> </pre>
        <td>{{data.days}}</td>
        <pre> </pre>
        <td>{{data.hours}}</td>


        <button *ngIf="data.specialapp!=1" ion-button small  round (click)="addCrn(data.crn)" color="primary" block>+</button>

        </tr>

    </ng-container>
</table>

Answer 1

尝试通过事件过滤courseData。您的样本不包含任何打字稿，因此很难提供明确的示例。通常，假设courseData是一个属性，您的打字稿中的操作事件类似于：

clicked($event) { this.courseData = this.courseData.filter(x => x.name.toLowerCase().indexOf($event.value.toLowerCase()) > -1)); }

可能存在任何数量的变化，具体取决于您要执行的操作（在keyUp上，单击等）。请注意，上面的示例不区分大小写。

角度简单表过滤器搜索栏

1 个答案: