javascript - 如何在 Angular 8 中用 Material 显示可观察的过滤项目？

Question

我有一个 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

但我的问题是，如何在 Material 网格中显示console.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 函数:

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>;

但是如何在实际网格中显示它们呢？

谢谢

实际项目必须显示的 View 如下所示:

<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)

Answer 1

你指定.subscribe方法的返回值，即订阅，但你需要结果，所以只需在.subscribe中执行即可>

searchFor(part: ParticipantInfoDTO) {
    this.participantService
      .filterParticipantsByRegistration(1, "Invited", moment(this.startDate).format("YYYY MM D"))
      .subscribe(result => {
        this.datasource.filter = result;
      });
  }