Question

我使用角形，角形材料和火力基础。

我可以使用以下代码正确显示我的数据，对其进行过滤，排序和分页。

根据缺点，只有在搜索栏中输入3个字符时，我才会显示数据。

您能帮我还是给我一个曲目？谢谢！

export class AnnuairePSComponent implements OnInit {

Data = {
titre:'',
prenom: '',
nom:'',
prof: '',
sv: '',
site:''
}

displayedColumns = [
'titre',
'prenom',
'nom',
'prof',
'sv',
'site'
 ];

 dataSource = new MatTableDataSource();

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

ngAfterViewInit() {
this.psService.getpss().subscribe(res => {this.dataSource.data = res;}); 
}

private paginator: MatPaginator;
private sort: MatSort;

@ViewChild(MatSort) set matSort(ms: MatSort) {
this.sort = ms;
this.setDataSourceAttributes();
}

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.setDataSourceAttributes();
}

setDataSourceAttributes() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}

constructor(private psService: PsService, private router: Router) { }
}

html

<mat-toolbar color="primary" [ngStyle]="{'height': '120px','padding-top' :'30px'}"> 

<mat-form-field appearance="outline" style="width:100%" >
<input matInput (keyup)="applyFilter($event.target.value)"  >
<mat-label>Rechercher un professionel</mat-label>
</mat-form-field>

<span class="example-spacer"></span>
</mat-toolbar>

<mat-card [ngStyle]="{'margin': '5px'}" *ngIf="dataSource?.filteredData.length">

<mat-table  [dataSource]="dataSource" [ngStyle]="{ 'width':'100%'}" matSort>
.....
</mat-table>

Answer 1

您尝试过吗：

def has_error(browser):
        try:            #/*[contains(text(), 'technology')]/html/body/span/section/main/div/article/div/div[1]/div/form/p"
            browser.find_element_by_xpath("/html/body//*[contains(text(),'technology')]")
            return False
        except: return True
        if not has_error(browser):
            print('Error found! , aborted!')
            browser.quit()
            os.execv(sys.executable, ['python'] + sys.argv)

编辑：确定，所以您应该将输入内容注册到模板的本地变量中：

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

，然后在您的表上应用结构指令：

 <input matInput (keyup)="applyFilter($event.target.value);" #filterInput >

Answer 2

在每次需要时编写过滤逻辑可能不是一个好习惯。如果您需要更多的表和过滤器，那么您最终将重复代码。我建议创建一个用于过滤的指令，或者使用已经为角形材料创建的指令：mat-table-filter

我最近为我的项目创建了这个库，并决定发布以供社区使用。

仅当我查找3个字符时才显示表格

2 个答案: