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

您要呈现的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

您的问题有两个部分。

请从响应中选择“事件”数组，并将其分配给 event.component.ts

中的事件类级别变量

sys.modules['Moo']

这样，您将只有事件数组，而不是整个响应。

第二步是，正如main所指出的那样，在li而不是ul上运行一个循环，如下所示：

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

我想再添加一种更好的做法，即添加elvis运算符或safe运算符，以使您的HTML不会失败。

事件。NomeEspec ---> 事件？。NomeEspec

这样，如果事件为 未定义 ，那么我们可以安全地访问事件对象的属性。

更新

<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>

在这里，您将类型转换为对Event []的响应，这时您需要进行如下所示的更改。

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

使用服务使用angular 7遍历json

4 个答案: