node.js - 使用服务通过 Angular 7 迭代 json

Question

我有一个返回以下 JSON 的 Node 服务器:

{
        "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 的 Angular 服务。

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>

问题:为每个事件对象创建一个具有相应信息的 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>