在angular2中访问嵌套数组对象时出现问题

如何访问下面给出的数组结构。如果我尝试此

*ngFor=“let item of bookedItems[0]”

我认为它只允许我访问数组[0]数据。数组[1]、数组[2]……数组[n]呢。我怎么弄到的

  [Array(2)]
      0: Array(2)
        0: {id: 2, name: "Calark", price: 375, …}
        1: {id: 5, name: "Eternis", price: 450, …}
        length: 2
      __proto__: Array(0)
      length: 1
      __proto__: Array(0)

内部组件

export class BookingComponent implements OnInit {
  bookedItems = [];
  constructor(private bookingService:BookingService) { }

  ngOnInit(){
    this.bookedData();
    console.log(this.bookedItems);
  }

  bookedData(){
    this.bookedItems = this.bookingService.getBookedItem();
  }
}

内部模板

<h3>Your Bookings:</h3>
<div *ngIf="bookedItems.length > 0; else plainText">
  <div class="cart-item" *ngFor="let item of bookedItems[0]">
<div class="flip-card">
  <div class="flip-card-inner">
          <div class="flip-card-front">
            <img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 305px" width="293px">
          </div>


          <div class="flip-card-back">
            <small>
                  <p>Name: {{item.name}}</p>
                  <p>Size: {{item.size}}</p>
                  <p>Price: {{item.price}}</p>
                  <p>City: {{item.city}}</p>
                  <p>Address: {{item.address}}</p>
            </small>
          </div>

     </div>
     </div><hr/>
  </div>
</div>


<ng-template #plainText>
  <p>You haven't booked any item. please book to get your booking details!!!</p>
</ng-template>

您的预订：
名称：{{item.Name}

大小：{{item.Size}

价格：{{item.Price}}

城市：{{item.City}

地址：{{item.Address}


您还没有预订任何商品。请预订以获取您的预订详细信息

对不起，我没有意识到数组是嵌套的。您可以尝试双循环：

  <div class="cart-item" *ngFor="let item of bookedItems">
    <div class="flip-card" *ngFor="let innerItem of item">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img [src]="innerItem.imagePath" alt="{{innerItem.name}}" class="img-responsive" style="max-height: 305px" width="293px">
        </div>


        <div class="flip-card-back">
          <small>
              <p>Name: {{innerItem.name}}</p>
              <p>Size: {{innerItem.size}}</p>
              <p>Price: {{innerItem.price}}</p>
              <p>City: {{innerItem.city}}</p>
              <p>Address: {{innerItem.address}}</p>
          </small>
        </div>

     </div>
    </div><hr/>
 </div>

名称：{{innerItem.Name}

大小：{{innerItem.Size}

价格：{{innerItem.Price}

城市：{{innerItem.City}

地址：{{innerItem.Address}

---

如果我要面对这个问题，我会首先展平阵列，因为只有一个嵌套级别。

对不起，我没有意识到，阵列是嵌套的。您可以尝试双循环：

  <div class="cart-item" *ngFor="let item of bookedItems">
    <div class="flip-card" *ngFor="let innerItem of item">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img [src]="innerItem.imagePath" alt="{{innerItem.name}}" class="img-responsive" style="max-height: 305px" width="293px">
        </div>


        <div class="flip-card-back">
          <small>
              <p>Name: {{innerItem.name}}</p>
              <p>Size: {{innerItem.size}}</p>
              <p>Price: {{innerItem.price}}</p>
              <p>City: {{innerItem.city}}</p>
              <p>Address: {{innerItem.address}}</p>
          </small>
        </div>

     </div>
    </div><hr/>
 </div>

名称：{{innerItem.Name}

大小：{{innerItem.Size}

价格：{{innerItem.Price}

城市：{{innerItem.City}

地址：{{innerItem.Address}

---

如果我要面对这个问题，我会首先展平阵列，因为只有一个嵌套级别。

我认为这里肯定需要一个双循环，除非有一个嵌套阵列是一个bug。如果不是，您可能应该像下面这样使用“ng container”指令=>

<h3>Your Bookings:</h3>
<div *ngIf="bookedItems.length > 0; else plainText">
  <ng-container *ngFor="let bookedItem of bookedItems">
    <div class="cart-item" *ngFor="let item of bookedItem">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 305px"
                 width="293px">
          </div>
          <div class="flip-card-back">
            <small>
              <p>Name: {{item.name}}</p>
              <p>Size: {{item.size}}</p>
              <p>Price: {{item.price}}</p>
              <p>City: {{item.city}}</p>
              <p>Address: {{item.address}}</p>
            </small>
          </div>
        </div>
      </div>
      <hr/>
    </div>
  </ng-container>
</div>


<ng-template #plainText>
  <p>You haven't booked any item. please book to get your booking details!!!</p>
</ng-template>

您的预订：
名称：{{item.Name}

大小：{{item.Size}

价格：{{item.Price}}

城市：{{item.City}

地址：{{item.Address}


您还没有预订任何商品。请预订以获取您的预订详细信息

---

我希望它能帮你一点忙。

我想你肯定需要一个双循环，除非你有一个嵌套数组是一个bug。如果不是，您可能应该像下面这样使用“ng container”指令=>

<h3>Your Bookings:</h3>
<div *ngIf="bookedItems.length > 0; else plainText">
  <ng-container *ngFor="let bookedItem of bookedItems">
    <div class="cart-item" *ngFor="let item of bookedItem">
      <div class="flip-card">
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img [src]="item.imagePath" alt="{{item.name}}" class="img-responsive" style="max-height: 305px"
                 width="293px">
          </div>
          <div class="flip-card-back">
            <small>
              <p>Name: {{item.name}}</p>
              <p>Size: {{item.size}}</p>
              <p>Price: {{item.price}}</p>
              <p>City: {{item.city}}</p>
              <p>Address: {{item.address}}</p>
            </small>
          </div>
        </div>
      </div>
      <hr/>
    </div>
  </ng-container>
</div>


<ng-template #plainText>
  <p>You haven't booked any item. please book to get your booking details!!!</p>
</ng-template>

您的预订：
名称：{{item.Name}

大小：{{item.Size}

价格：{{item.Price}}

城市：{{item.City}

地址：{{item.Address}


您还没有预订任何商品。请预订以获取您的预订详细信息

---

我希望它能帮你一点忙。

你能多发布一些你已经尝试过的东西吗far@digital-污染当然你现在可以查一下你能不能多发一些你已经尝试过的东西far@digital-我确信你现在可以检查我是否正在执行此操作

*ngFor=“let item of bookedItems”

我无法访问

{{item.name}{{item.price}}..

等等..如果我这样做

*ngFor=“let item of bookedItems”

我无法访问

{{item.name}{{{item.price}..

等等..这里的作用是什么？有时你不想创建一个无用的div或任何html块来遍历数组。这里的作用是什么？有时你不想创建一个无用的div或任何html块来遍历数组。