Angular Material底页，尝试将变量作为数据传递时遇到问题

Question

尝试将变量作为数据传递到 Angular 8 Material 中的底页。 按照他们的文档，我能够成功地将字符串传递给底页，但无法传递变量。有人可以帮忙吗？我感谢任何和所有的建议。

这是我要打开的底部工作表的 TS 和 HTML

//HTML Portion

<div> passed in {{data.searchResults}}</div>

// TS Portion

import { Component, Inject } from '@angular/core';
import { MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA } from '@angular/material/bottom-sheet';

@Component({
  selector: 'app-singlejobpage',
  templateUrl: './singlejobpage.component.html',
  styleUrls: ['./singlejobpage.component.scss']
})
export class SinglejobpageComponent {

  constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: any, private _bottomSheetRef: MatBottomSheetRef<SinglejobpageComponent>) { }

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }


}

下面是我的 mainpage.TS，我正在尝试发送数据。

 openBottomSheet(): void {
    this._bottomSheet.open(SinglejobpageComponent, {
      data: { searchResults: this.filteredData }
    });
  }

  filterForone(y) {
    let filteredData = this.jobs.filter(x => x.data.title === y)
    console.log(filteredData)
    console.log(filteredData[0].data.title)
    this.openBottomSheet();
  }

Answer 1

您正在引用 this.data，但在您的代码中您从未设置此属性。

尝试：

 openBottomSheet(): void {
    this._bottomSheet.open(SinglejobpageComponent, {
      data: { searchResults: this.filteredData }
    });
  }

  filterForone(y) {
    this.filteredData = this.jobs.filter(x => x.data.title === y)
    console.log(this.filteredData)
    console.log(this.filteredData[0].data.title)
    this.openBottomSheet();
  }