javascript - 将对象数据获取到 Angular 中的变量

Question

目前我正在 Angular 中做一个包含多个 JSON 文件的项目。我的主要组件中有一个带有 routerLinks 的 anchor 。我通过 module.ts 中的 routerLink 将 Angular 绑定(bind)作为变量传递到路由器路径，并将该变量传递给另一个名为 Filter 的组件。在 Filter 组件中获取变量后，我创建一个 url 来获取 JSON 数据。我将变量附加到 url 来完成 url，以便我可以调用不同的 JSON 文件。

问题是，过滤器组件中名为 sub.name 的传入变量在控制台中正确显示为 {"sub.name":"ABC"} 但当我将其放入变量中时，它显示为 [object Object ]。我使用 JSON.stringify() 将其转换为变量，但问题仍然出现。

这就是我所拥有的:

category.component.html

<ng-template #s><dd><a routerLink="{{sub.name}}" routerLinkActive="active">{{sub.name}}</a></dd></ng-template>

app.module.ts

const appRoutes: Routes = [
  { path: 'explore-all-item', component: AllItemsComponent },
  { path: ':sub.name', component: FilterComponent }
    ];

过滤器.组件.ts

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html',
  styleUrls: ['./filter.component.css']
})
export class FilterComponent {

    cat:string;
    temp:string;

    @Input() url:string;

  constructor(private httpClient:HttpClient, private route: ActivatedRoute) {

    this.route.params.subscribe((params:any) => {this.temp = params})

    this.httpClient.get('http://myapp/explore/'+this.temp)

    .subscribe(
            (dat:any) => {

                this.cat = JSON.stringify(dat[0]);
            }
        )
  }
}

filter.component.html

<div>
    <p>{{temp}} is url</p>
</div>

输出是[object Object] is url。我如何克服这个问题？

Answer 1

只需使用json管道即可查看实际数据，

<div>
    <p>{{temp | json}} is url</p>
</div>

或删除 JSON.stringify 因为它已经是一个对象。

this.cat = dat[0];