我正在控制台中使用 Angular获取数据,但无法在html中呈现数据。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (361)

这是我的页面-Dailail.Component.ts

export class PageDetailComponent implements OnInit {

  private apiUrl="http://localhost:3000/pages"

  pages={};
  // data={};

  constructor(private route:ActivatedRoute,private page:PageService,private router: Router,private http:Http) { }

  ngOnInit() {
    this.getpage(this.route.snapshot.params['title']);
    // this.getPages();
    // this.getData();

  }
  getpage(title) {
    this.page.getPage(title)
      .subscribe(pages => {
        console.log(pages);
        this.pages = pages;
      }, err => {
        console.log(err);
      });
  }

这是我在控制台中得到的响应。我得到了这个对象错误,它无法在html中呈现它。

<a *ngFor="let p of pages" class="list-group-item list-group-item-action">
  {{p.title}}
</a>

这是我在控制台得到的响应

提问于
用户回答回答于

试试这个。

export class PageDetailComponent implements OnInit {

  private apiUrl="http://localhost:3000/pages"

  pages=[];
  // data={};

  constructor(private route:ActivatedRoute,private page:PageService,private router: Router,private http:Http) { }

  ngOnInit() {
    this.getpage(this.route.snapshot.params['title']);
    // this.getPages();
    // this.getData();

  }
  getpage(title) {
    this.page.getPage(title)
      .subscribe(page => {
        console.log(page);
        this.pages.push(page);
      }, err => {
        console.log(err);
      });
  }
用户回答回答于

原因是我得到了这个,是我在对象中返回我的数据,而不是数组,我是这样做的

{{pages.title}} 

你可以把它变成像这样的物体

pages:any={};   //For Objects
page:any=[];    //For Arrays

扫码关注云+社区

领取腾讯云代金券