角度簡單表格過濾器搜索欄

Question

我正在從數據庫中提取數據數組並用簡單表顯示它。我想做的是在此表中添加簡單表過濾器搜索欄功能，例如通過.name屬性對其進行過濾。數組。

<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，click等上），可以存在任何數量的變體。 注意，上面的示例不區分大小寫。