角材料表過濾器有多余的線

Question

我正在使用<mat-table>構建Angular Material表，並想應用過濾器。 過濾器可以工作，但是有一條額外的過濾器線正在渲染。 之前有沒有人看過這個問題/對如何解決有任何想法？ 我認為這可能是一個進口問題，但未能查明。

多余的行是<mat-input-underline mat-form-field-underline>元素。

以下是相關的代碼片段：

的HTML

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="field">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Header</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.field}} </mat-cell>
    </ng-container>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

打字稿

import { Component, OnInit, Input } from '@angular/core';
import { MatTableDataSource } from '@angular/material';

export interface Field {
    field: String;
}

@Component({
    selector: 'app-single-col-list',
    templateUrl: './single-col-list.component.html',
    styleUrls: ['./single-col-list.component.scss']
})
export class SingleColListComponent implements OnInit {
    @Input() colData: Field[];
    displayedColumns: string[] = ['field'];
    dataSource: MatTableDataSource<any>;

    constructor() { }

    ngOnInit() {
        this.dataSource = new MatTableDataSource(this.colData);
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
    }
}

進口貨

AppRoutingModule,
BrowserAnimationsModule,
BrowserModule,
CalendarModule,
CdkTableModule,
ChartModule,
DataViewModule,
DropdownModule,
FormsModule,
HttpClientModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatSlideToggleModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MDBBootstrapModule.forRoot(),
NguCarouselModule,
PanelModule

Answer 1

作為一種快速的解決方案，我能夠簡單地刪除<mat-form-field>元素，而直接使用直接的<input ..>元素，就可以了：

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
<mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="field">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Header</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.field}} </mat-cell>
    </ng-container>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

但是，不太確定如何通過以下示例協調此行為： https : //material.angular.io/components/table/overview