Мне нужно получить массив JSON объектов на страницу Angular через GET-запрос от контроллера API

Question

Часть HTML

<div *ngIf="list">
 <ul>
  <li *ngFor="let td of list">
   {{td.Title}}
   {{td.Description}}
   {{td.Date}}
   {{td.Url}}
   {{td.Tag}}
  </li>
 </ul>
</div>

Часть компонента

list: any = [];

constructor(private service: TradeDetailService) { }

ngOnInit() {
 this.service.getAllTrades()
  .subscribe(data => {

    this.list = data;
    console.log(data);
  })
}

Часть класса обслуживания

getAllTrades(): Observable<TradeDetail> {
 return this.http.get<TradeDetail>(this.rootUrl + '/Trade');
}  

Часть модели:

export class TradeDetail {
 Id: number;
 UserId: string;
 Title: string;
 Description: string;
 Date: Date;
 Url: string;
 FairnessRating: number;
 TrustRating: number;
 Tag: string;
}

Вот результат, который я сейчас получаю:

Текущие результаты

и вот мои данные, которые я получаю каждый раз, когда отправляю запрос GET к этому конкретному контроллеру:

Также представьте, что показанный объект действительно 6 объектов, поэтому есть 6 точек

[
 {
    "id": 2,
    "userId": "b9fc2043-ce83-426c-8e2c-063e40a26271",
    "title": "Trade 1",
    "description": "good trade",
    "date": "2016-09-09T00:00:00-05:00",
    "url": "https://devimagegallery1.blob.core.windows.net/images/cir_animacion_1.jpg",
    "fairnessRating": 23,
    "trustRating": 99,
    "tag": "#tree"
}
] 

Моя проблема в том, что я чувствую, что данные читаются и фактически помещаются в массиве, но по какой-то причине он не будет отображать соответствующие параметры. Я думаю, что это связано с тем, что я безуспешно форматирую входящие объекты массива JSON, а не инициализирую их на основе их атрибутов.

Answer 1

Я предлагаю вам попробовать следующее html, чтобы точно узнать, что содержит объект в каждой строке:

<div *ngIf="list">
 <ul>
  <li *ngFor="let td of list">
   {{td | json}}
  </li>
 </ul>
</div>

Труба JSON печатает данный объект как json и очень удобна при отладке циклов.

Затем вы должны увидеть, что содержит ваш объект td для каждой строки, и продолжить установку заголовка et c. с точными именами переменных.