angular - 在angular2中访问嵌套数组对象时出现问题
问题描述
我如何访问下面给出的数组结构。如果我正在尝试这个,*ngFor="let item of bookedItems[0]"
我认为它只允许我访问数组 [0]数据。那么array[1], array[2]....array[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>
解决方案
我认为你在这里肯定需要一个双循环,除非你有一个嵌套数组的事实是一个错误。如果不是,您可能应该使用像这样的“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>
我希望它对你有所帮助。
推荐阅读
- spring-boot - 有没有办法使用 jdbctemplate 将从文件中读取的 sql 批量插入到数据库中?
- django - Django 电子商务:未找到带有参数 '('',)' 的 'cart_add' 的反向。尝试了 1 种模式:['cart/add/(?P
[0-9]+)/$'] - python - Pandas:用 0 填充一些分类数据
- c - 有效地找到大数组中的最低有效位?
- python-3.x - 使用带有 KEYENCE 传感器的 python 进行 ASCII 交换
- sql - 为什么在使用 Databricks SQL 时显示此错误
- cypress - Cypress - QueryString 参数序列化器
- node.js - fs.copyFile 和 child_process(cmd 复制方法)在文件被复制后挂起几分钟,可能是内存丢失?反应+电子
- spring - Spring存储库修改单独的日志记录
- r - 和加权瑞利分布