角材料表过滤器有多余的线

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

作为一种快速的解决方案，我能够简单地删除LIBS = libmylib.a LIB_DIRS = ./sources 元素，而直接使用直的<mat-form-field>元素，就可以了：

<input ..>

但是，不太确定如何通过以下示例来协调此行为：https://material.angular.io/components/table/overview