表格下方的CSS引导程序列表

Question

我正在将Angular 8与Bootstrap和Angular Mats一起使用。

我有以下内容：

<header>
</header>

<div class="container">
  <div class="row">
    <nav class="navbar">
      <input class="form-control" type="text" placeholder="Search by Title, Keyword, or File Type.." name="search" autofocus [(ngModel)]="filterBar">      
    </nav>
    <table mat-table class="table">
      <thead>
          <th mat-header-cell>
              <p>
                <mat-form-field>
                  <mat-select placeholder="Filter By" [(value)]="filterBy">
                      <mat-option value="">All Media</mat-option>
                      <mat-option *ngFor="let media of medias" value="{{media.type}}">{{media.type}}</mat-option>
                  </mat-select>
                </mat-form-field>
              </p>
          </th>
          <th mat-header-cell>
              <p>
                  <mat-form-field>
                    <mat-select placeholder="Sort By" [(value)]="sortBy">
                        <mat-option value="date">Date Uploaded</mat-option>
                        <mat-option value="name">Alphabetical</mat-option>
                    </mat-select>
                  </mat-form-field>
                </p>
          </th>
          <th mat-header-cell>
                <p>
                  <button mat-button (click)="clearclick($event)">Clear</button>
                </p>
          </th>
      </thead>
      <tbody>
        <tr *ngFor="let media of medias | orderBy: sortBy : false | filter:filterBar | filter:filterBy | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
          <td>{{media.name}}</td>
        </tr>
      </tbody>
      <pagination-controls class="float-right" (pageChange)="p = $event"></pagination-controls>
    </table>
  </div>
</div>

这将显示一个表格，并且表格标题中有一些下拉菜单。当我选择一个下拉菜单时，options将显示在表格下方。如您所见，过滤器选项（所有媒体，视频，Interactive Vids，音频，图像）显示在表格下方。

问题：

如何更改它以显示表格上方“筛选依据”标题下的下拉选项？