使用服务使用 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 的 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>

问题：为每个 Event 对象创建一个带有相应信息的 li 元素。目前它只在 li 元素上创建，不显示 JSON 信息

Answer 1

您的问题有两个部分。

请从响应中选择 Events 数组并将其分配给 event.component.ts

中的 events 类级别变量

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 运算符或安全运算符，这样你的 HTML 就不会失败。

event.NomeEspec ---> event?.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.
  }**

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

您还应该在进一步的步骤中更改返回类型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

您应该迭代 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>