我有一个Angular 8应用程序和一个搜索表单。所以我可以像这样过滤服务中的数据：
this.participantService.filterParticipantsByRegistration(1, "Invited", moment(this.startDate).format('YYYY MM D')).subscribe(result => {
console.log(this.startDate.toString());
console.log(result);
});
我看到正确的数据如下：
7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {participantId: "1df0b475-d463-47ba-29a4-08d6ce7e67a4", email: "gjbh9@idmatica.nl", fullName: "Gert-Jan Boesschen Hospers", firstName: "Gert-Jan", lastNamePrefix: "", …}
1: {participantId: "6f5d3210-5650-41bd-bfb0-08d6d23579f3", email: "gjbh11@idmatica.nl", fullName: "Gert-Jan Boesschen Hospers", firstName: "Gert-Jan", lastNamePrefix: "", …}
2: {participantId: "e6fb0137-d21e-419b-bfb1-08d6d23579f3", email: "gjbh12@idmatica.nl", fullName: "Gert-Jan Boesschen Hospers", firstName: "Gert-Jan", lastNamePrefix: "", …}
3: {participantId: "ba645f8c-3b53-44d4-bfb2-08d6d23579f3", email: "gjbh15@idmatica.nl", fullName: "Gert-Jan Bosch
但我的问题是，如何在材料网格中显示控制台.log？
所以这是模板：
<div
class="filter-plus mat-elevation-z8"
[ngClass]="{ expanded: searchExpanded }"
>
<div class="filter-plus-search-fields">
<div class="search-types">
<mat-radio-group>
<mat-radio-button
*ngFor="let option of searchOptions"
[value]="option.label"
(change)="setSelectedSearchOptions(option.label)"
>
{{ option.label }}
</mat-radio-button>
</mat-radio-group>
</div>
<div class="search-selects">
<div
class="search-select searchstatus"
*ngIf="selectedSearch && hasStatusOptions(selectedSearch)"
>
<mat-select placeholder="Status" name="option">
<mat-option
*ngFor="let option of getStatusOptions(selectedSearch)"
[value]="option"
>
{{ option }}
</mat-option>
</mat-select>
</div>
<div
class="search-select searchoptions"
*ngIf="selectedSearch && hasOtherOptions(selectedSearch)"
>
<mat-select placeholder="Opties" name="option">
<mat-option
*ngFor="let option of getOtherOptions(selectedSearch)"
[value]="option"
>
{{ option }}
</mat-option>
</mat-select>
</div>
</div>
<div>
<mat-form-field class="search-field-input">
<input matInput [matDatepicker]="picker1" placeholder="start datum" [(ngModel)]="startDate" />
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
</div>
<div class="extended-search-actions">
<button
mat-raised-button
color="accent"
class="Button"
(click)="searchFor($event.target.value)"
>
Zoek
</button>
<button mat-raised-button color="secondary" class="Button">
Clear
</button>
<button
mat-raised-button
color="warn"
class="Button"
(click)="closeSearch()"
>
Annuleer
</button>
</div>
</div>
<button
mat-raised-button
class="extended-search-close"
(click)="closeSearch()"
*ngIf="searchExpanded"
>
<mat-icon>
clear
</mat-icon>
</button>
</div>
这是搜索函数：
searchFor(part: ParticipantInfoDTO) {
this.datasource.filter = this.participantService
.filterParticipantsByRegistration(1, "Invited", moment(this.startDate).format("YYYY MM D"))
.subscribe(result => {
console.log(this.startDate.toString());
console.log(result);
});
}
具有以下属性：
@Input() searchExtended: boolean;
@Output() clickOpenSearch = new EventEmitter<void>();
@Output() clickCloseSearch = new EventEmitter<void>();
datasource: MatTableDataSource<ParticipantInfoDTO>;
但是如何在实际网格中显示它们呢？
谢谢
必须显示实际项目的视图如下所示：
<div class="header">
<div class="table-menu" [ngClass]="{ extendedOpen: searchExpanded }">
<h1 class="heading list-heading" i18n>Participants</h1>
<div class="search-filters">
<div
class="filter-plus-icons"
title="Uitgebreid zoeken"
*ngIf="!searchExpanded"
>
<mat-icon
(click)="openSearch()"
class="filter-plus-icon filter-plus-icon-search mat-elevation-z8"
>filter_list</mat-icon
>
</div>
<app-extended-search [@searchOpen]
(clickCloseSearch)="handleClickCloseSearch()"
[searchExtended]="searchExpanded"
class="extended-search"
[ngClass]="{expanded: searchExpanded}"
></app-extended-search>
<div class="table-filter mat-elevation-z8">
<mat-form-field>
<input
matInput
placeholder="Filter"
placeholder-i18n
(keyup)="applyFilter($event.target.value)"
/>
</mat-form-field>
</div>
</div>
</div>
</div>
<div class="body pulled-up">
<div class="mat-elevation-z8">
<table
mat-table
class="full-width-table table-fixed"
[dataSource]="datasource"
matSort
aria-label="Elements"
>
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Name</th>
<td mat-cell *matCellDef="let row">{{ row.fullName }}</td>
</ng-container>
<ng-container matColumnDef="dateOfBirth">
<th mat-header-cell *matHeaderCellDef mat-sort-header i18n>
Date of birth
</th>
<td mat-cell *matCellDef="let row">
{{ row.dateOfBirth | date: 'dd-MM-yyyy' }}
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Email</th>
<td mat-cell *matCellDef="let row">{{ row.email }}</td>
</ng-container>
<ng-container matColumnDef="view">
<th mat-header-cell *matHeaderCellDef i18n>View</th>
<td mat-cell *matCellDef="let row">
<a
mat-button
mat-icon-button
[routerLink]="['../', row.participantId]"
><mat-icon>visibility</mat-icon></a
>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[25, 50, 100, 250]"></mat-paginator>
</div>
</div>
但例如，如果我这样做：
searchFor(part: ParticipantInfoDTO) {
this.datasource.filter = this.participantService
.filterParticipantsByRegistration(1, "Invited", moment(this.startDate).format("YYYY MM D"))
.subscribe(result => {
console.log(this.startDate.toString());
console.log(result);
});
}
我收到此错误：
Type 'Subscription' is not assignable to type 'string'.ts(2322)
你分配了.subscribe 方法的返回，那就是订阅，但你需要结果，所以只需在.subscribe中执行此操作
searchFor(part: ParticipantInfoDTO) {
this.participantService
.filterParticipantsByRegistration(1, "Invited", moment(this.startDate).format("YYYY MM D"))
.subscribe(result => {
this.datasource.filter = result;
});
}