关于html:Angular Material底表,尝试将变量作为数据传递时遇到麻烦

Angular Material bottomsheet, trouble trying to pass a variable as data

尝试将变量作为数据传递到Angular 8材质的底表。
根据他们的文档,我能够成功地将字符串传递到底部表单,但是无法传递变量。有人可以帮忙吗?我感谢所有建议。

这是我要打开的底页的TS和HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//HTML Portion

 passed in {{data.searchResults}}

// 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。

1
2
3
4
5
6
7
8
9
10
11
12
 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();
  }

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

尝试:

1
2
3
4
5
6
7
8
9
10
11
12
 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();
  }