Question

当前，我正在Angular中做一个带有几个JSON文件的项目。我在routerLinks的主要组件中有一个锚点。我通过module.ts中的routerLink将角度绑定作为变量传递到路由器路径，并将该变量带到另一个称为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 }
    ];

filter.component.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]是url。我该如何克服？

Answer 1

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

sortData(key: any) {
this.data.sort(function (name1, name2) {
  if (name1[key] > name2[key]) {
    return -1;
  } else if (name1[key] < name2[key]) {
    return 1;
  } else {
    return 0;
  }
});
}

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

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

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

1 个答案: