Question

在按钮中单击我具有的功能，

  inviewMockupEvent(data) {
    console.log(data);
    this.router.navigate(['/page-mockup'], { queryParams: { data: data },  skipLocationChange: true });
  }
console.log(data) give the result as {mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432", …}

在导航组件中，我正在按以下方式获取数据，

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe(params => {
      let data = params['data'];
      console.log(data);
      console.log(JSON.stringify(data));
    });

在哪里

console.log(data) gives output as [object Object]
console.log(JSON.stringify(data)) gives output as "[object Object]"

还有

console.log(data.mockup_id) gives result undefined

在这里，我需要检索对象值，但无法获取它。请帮助我通过查询参数检索数据并使用打字稿ngOnit来获取而不使用html。

Answer 1

基于您的网址localhost:80000/#/page-mockup?data=%5Bobject%20Object%5D，这是因为angular只选择了data键并将值转换为字符串（我猜这仅适用于对象值），这就是为什么您得到[对象对象]

console.log({mockup_id: "123", project_id: "456", module_id: "678", release_id: "890", requirement_id: "432"}.toString());

因此，请转换this.router.navigate(['/page-mockup'], { queryParams: { data: data }, skipLocationChange: true });

对此

this.router.navigate(['/page-mockup'], { queryParams: data,  skipLocationChange: true });

Answer 2

您正在向对象添加无用的图层。传播它。

ID NAME PARENT_ID
-- ---- ---------
1  A    -
2  B    1
3  C    2
4  D    3
5  E    2

如果要使用数组表示法，请使用数组变量，而不要使用map变量。

显示正确的变量。

this.router.navigate(['/page-mockup'], { queryParams: { ...data },  skipLocationChange: true });

Stackblitz

如何使用Typescript在queryparams中获取对象？

2 个答案: