Я получаю данные в консоли, используя Angular, но я не могу отобразить их в html

Question

Это мой Page-datail.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);
      });
  }

Это ответ, который я получаю в консоли.Я получаю эту Object Object Error, и он не может отобразить его в html.

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

Это ответ, который я получаю в консоли

Answer 1

попробуйте это,

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);
      });
  }

Answer 2

Причина в том, что я получаю то, что я получаю. Возвращаю свои данные в объекте, а не в массиве. Я сделал это так, как

{{pages.title}} 

, и вы можете сделать это в объектах, подобных этому

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