时间戳

首页 > 解决方案 > 当我编写 {{bookings|json}} 时，它会向我显示对象数组。但是当我只写 {{bookings}} 时，它什么也没显示

node.js - 当我编写 {{bookings|json}} 时，它会向我显示对象数组。但是当我只写 {{bookings}} 时，它什么也没显示

问题描述

视图.comp.ts

在 view.comp.ts 中调用 viewAllBookings() 时， this.flightDetails 将被分配

[{"_id":"5ec8d981fe559619a0a36ab3","flightId":"IND-101","AircraftName":"Delta Airlines","fare":600,"availableSeats":9,"status":"Running"," bookings":[{"_id":"5ec8d981fe559619a0a36ab4","customerId":"P1001","bookingId":2001,"noOfTickets":3,"bookingCost":1800},{"_id":"5ec8d981fe559619a0a36ab5"," customerId":"S1001","bookingId":2003,"noOfTickets":2,"bookingCost":1200},{"_id":"5ed923926cb1ea3f80f090ef","customerId":"G1001","bookingId":2007," noOfTickets":1,"bookingCost":600}],"__v":0},{"_id":"5ec8d981fe559619a0a36ab6","flightId":"IND-102","AircraftName":"JetBlue","fare":750,"availableSeats":18,"status":"Running","bookings":[{"_id" :"5ec8d981fe559619a0a36ab7","customerId":"P1001","bookingId":2002,"noOfTickets":3,"bookingCost":2250},{"_id":"5ec8d981fe559619a0a36ab8","customerId":"G1001"," bookingId":2004,"noOfTickets":2,"bookingCost":1500},{"_id":"5ed924ea6cb1ea3f80f090f0","customerId":"S1001","bookingId":2008,"noOfTickets":2,"bookingCost" :1500}],"__v":0},{"_id":"5ec8d981fe559619a0a36ab9","flightId":"IND-103","AircraftName":"United Airlines","fare":800,"availableSeats":10,"status":"Cancelled","bookings":[{"_id":"5ec8d981fe559619a0a36aba"," customerId":"S1001","bookingId":2005,"noOfTickets":1,"bookingCost":800},{"_id":"5ec8d981fe559619a0a36abb","customerId":"G1001","bookingId":2006," noOfTickets":4,"bookingCost":3200}],"__v":0}]bookingId":2005,"noOfTickets":1,"bookingCost":800},{"_id":"5ec8d981fe559619a0a36abb","customerId":"G1001","bookingId":2006,"noOfTickets":4,"bookingCost" :3200}],"__v":0}]bookingId":2005,"noOfTickets":1,"bookingCost":800},{"_id":"5ec8d981fe559619a0a36abb","customerId":"G1001","bookingId":2006,"noOfTickets":4,"bookingCost" :3200}],"__v":0}]

& this.bookings 将被分配一个预定对象数组

[ {“_id”：“5ec8d981fe559619a0a36ab4”，“customerId”：“P1001”，“bookingId”：2001，“noOfTickets”：3，“bookingCost”：1800，“flightId”：“IND-101”}，{“_id “：“5ec8d981fe559619a0a36ab5”，“customerId”：“S1001”，“bookingId”：2003，“noOfTickets”：2，“bookingCost”：1200，“flightId”：“IND-101”}，{“_id”：“5ed923926cb1ea3f80f090ef ”，“customerId”：“G1001”，“bookingId”：2007，“noOfTickets”：1，“bookingCost”：600，“flightId”：“IND-101”}，{“_id”：“5ec8d981fe559619a0a36ab7”，“customerId” ": "P1001", "bookingId": 2002, "noOfTickets": 3,“bookingCost”：2250，“flightId”：“IND-102”}，{“_id”：“5ec8d981fe559619a0a36ab8”，“customerId”：“G1001”，“bookingId”：2004，“noOfTickets”：2，“bookingCost”： 1500，“flightId”：“IND-102”}，{“_id”：“5ed924ea6cb1ea3f80f090f0”，“customerId”：“S1001”，“bookingId”：2008，“noOfTickets”：2，“bookingCost”：1500，“flightId” “：“IND-102”}，{“_id”：“5ec8d981fe559619a0a36aba”，“customerId”：“S1001”，“bookingId”：2005，“noOfTickets”：1，“bookingCost”：800，“flightId”：“IND -103" }, { "_id": "5ec8d981fe559619a0a36abb", "customerId":“G1001”，“bookingId”：2006，“noOfTickets”：4，“bookingCost”：3200，“flightId”：“IND-103”}]

export class ViewDetailsComponent implements OnInit {

  bookings: Flights[] = []
  flightDetails: FlightBooking[];

 constructor(private viewdetailsservice: ViewDetailsService) { }
  ngOnInit() {
    this.viewAllBookings()
  }


 viewAllBookings() {
    this.viewdetailsservice.view().subscribe(
      (success)=>{this.flightDetails=success
      this.flightDetails.forEach((ele)=>{
        ele.bookings.forEach((booking)=>{
          booking.flightId=ele.flightId
          this.bookings.push(booking)
        })
      })},
      (error)=>{this.errorMessage=error}
    ) 
 }
}

view.comp.html

当我写 {{bookings|json}} 时，它显示给我

[ {“_id”：“5ec8d981fe559619a0a36ab4”，“customerId”：“P1001”，“bookingId”：2001，“noOfTickets”：3，“bookingCost”：1800，“flightId”：“IND-101”}，{“_id “：“5ec8d981fe559619a0a36ab5”，“customerId”：“S1001”，“bookingId”：2003，“noOfTickets”：2，“bookingCost”：1200，“flightId”：“IND-101”}，{“_id”：“5ed923926cb1ea3f80f090ef ”，“customerId”：“G1001”，“bookingId”：2007，“noOfTickets”：1，“bookingCost”：600，“flightId”：“IND-101”}，{“_id”：“5ec8d981fe559619a0a36ab7”，“customerId” ": "P1001", "bookingId": 2002, "noOfTickets": 3,“bookingCost”：2250，“flightId”：“IND-102”}，{“_id”：“5ec8d981fe559619a0a36ab8”，“customerId”：“G1001”，“bookingId”：2004，“noOfTickets”：2，“bookingCost”： 1500，“flightId”：“IND-102”}，{“_id”：“5ed924ea6cb1ea3f80f090f0”，“customerId”：“S1001”，“bookingId”：2008，“noOfTickets”：2，“bookingCost”：1500，“flightId” “：“IND-102”}，{“_id”：“5ec8d981fe559619a0a36aba”，“customerId”：“S1001”，“bookingId”：2005，“noOfTickets”：1，“bookingCost”：800，“flightId”：“IND -103" }, { "_id": "5ec8d981fe559619a0a36abb", "customerId":“G1001”，“bookingId”：2006，“noOfTickets”：4，“bookingCost”：3200，“flightId”：“IND-103”}]

但是当我只写 {{bookings}} 时它什么都不显示

现在我的问题是当我写 {{bookings}} 时为什么不向我显示 [object Object ...] 像这样

标签： node.jsangularinterpolation

解决方案

我看不到在视图中显示数组的任何用途。Angular 团队很可能只是不关心这种情况，而是做了一些简单的实现，不会破坏任何东西

推荐阅读