使用服務使用angular 7遍歷json

Question

我有一個返回以下JSON的節點服務器：

{
        "ResponseStatus": {
          "ResponseCode": 0,
          "ResponseMessage": "Success."
        },
        "Events": [
          {
            "CodEspec": 65957,
            "NomeEspec": "O PIOR ESPETÁCULO DO MUNDO",
            "DiaHoraEspecs": [
              "2019-05-09T21:30:00",
              "2019-05-10T21:30:00",
              "2019-05-25T21:30:00"
            ]
          },
          {
            "CodEspec": 01234,
            "NomeEspec": "O MELHOR ESPETÁCULO DO MUNDO",
            "DiaHoraEspecs": [
              "2019-05-09T21:30:00",
              "2019-05-10T21:30:00",
              "2019-05-25T21:30:00"
            ]
          },

        ]
      }

我創建了一個執行GET並返回JSON的角度服務。

tickeline.service.ts

getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions);
  }

還為事件創建了一個模型，僅獲取某些參數：

events.ts

export class Event{

  CodEspec: number;
  NomeEspec: string;
  DiaHoraEspecs: Date[];

}

我想在其中顯示JSON的事件組件中，我從服務中調用了函數geteventos。

events.component.ts

export class EventsComponent implements OnInit {

  events: Event[];

  constructor(private ticketlineservice: TicketlineService) { }

  ngOnInit() {
    this.ticketlineservice.getEventos().subscribe(events => {
      this.events = events;
    });
  }
}

events.component.html

<div class="text-center">
    <ul *ngFor="let event of events">
        <li class="btn bg-primary text-center">
            <h2>Evento:</h2> 
            <p>{{ event.NomeEspec }}</p>
            <p>{{ event.CodEspec }}</p>
            <p>{{ event.DiaHoraEspecs }}</p>
        </li>
    </ul>
</div>

問題：為每個Event對象創建一個帶相應信息的li元素。 目前，它僅在li元素上創建，並且不顯示JSON信息

Answer 1

而不是遍歷ul元素，您應該遍歷li元素

 <div class="text-center">
        <ul>
            <li class="btn bg-primary text-center" *ngFor="let event of events">
                <h2>Evento:</h2> 
                <p>{{ event.NomeEspec }}</p>
                <p>{{ event.CodEspec }}</p>
                <p>{{ event.DiaHoraEspecs }}</p>
            </li>
        </ul>
    </div>

Answer 2

在您要呈現的json中， Events是一個屬性。 所以，你應該得到這個屬性events在subscribe ：

this.ticketlineservice.getEventos().subscribe(events => {
  this.events = events.Events;
});

但是，如果要獲取數組作為內部具有Events屬性的響應（如您在注釋中提到的那樣），則應執行以下操作：

this.ticketlineservice.getEventos().subscribe(events => {
  this.events = events[0].Events;
});

而且，您還應該在進一步的步驟中更改return getEventos():Observable<Event[]>因為如您所顯示的，這是不正確的（根據此示例JSON響應）。 您不返回Event數組。

而且在HTML文件中，您應該進行類似@Dusan Radovanovic帖子的更改作為他的答案。 所以它應該像這樣：

<div class="text-center">
  <ul>
    <li class="btn bg-primary text-center" *ngFor="let event of events">
      <h2>Evento:</h2> 
      <p>{{ event.NomeEspec }}</p>
      <p>{{ event.CodEspec }}</p>
      <p>{{ event.DiaHoraEspecs }}</p>
    </li>
  </ul>
</div>

Answer 3

您的JSON不是數組，而是一個對象。

在您的訂閱中，我認為您可能想要這樣做：

  this.events = events.Events;

正如其他人提到的那樣，在您當前的代碼中，您應該創建兩個ul列表。 如果要創建一個包含兩個項目的列表，則需要這樣的操作：

<ul >
    <li class="btn bg-primary text-center" *ngFor="let event of events">
        <h2>Evento:</h2> 
        <p>{{ event.NomeEspec }}</p>
        <p>{{ event.CodEspec }}</p>
        <p>{{ event.DiaHoraEspecs }}</p>
    </li>
</ul>

將*ngFor從ul移到li

Answer 4

您的問題分為兩部分。

從響應中選擇“事件”數組，並將其分配給event.component.ts中的事件類級別變量

export class EventsComponent implements OnInit {

  events: Event[];

  constructor(private ticketlineservice: TicketlineService) { }

  ngOnInit() {
    this.ticketlineservice.getEventos().subscribe(events => {
      this.events = events.Events;// This is the change for getting only events from the response
    });
  }
}

這樣，您將只有事件數組，而不是整個響應。

第二步是，正如main指出的那樣，在li而不是ul上運行一個循環，如下所示：

<div class="text-center">
        <ul>
            <li class="btn bg-primary text-center" *ngFor="let event of events">
                <h2>Evento:</h2> 
                <p>{{ event.NomeEspec }}</p>
                <p>{{ event.CodEspec }}</p>
                <p>{{ event.DiaHoraEspecs }}</p>
            </li>
        </ul>
    </div>

我想添加一種更好的做法，即添加elvis運算符或safe運算符，以使您的HTML不會失敗。

event.NomeEspec ---> 事件？.NomeEspec

這樣，如果事件未定義，那么我們將安全地訪問事件對象的屬性。

更新資料

getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions);
  }

在這里，您將強制類型轉換為對Event []的響應，如下所示，您將需要進行一些更改。

**getEventos():Observable<Event[]>{
    //get todos os eventos
    return this.http.get<Event[]>(this.url_node, httpOptions).map(response=> response.Events);// map operstor takes your response and sends the Events array as a part of the response for your HTTP call.
  }**