Angular 遍历对象数组

Question

我有一个如下所示的数组：

[
 {
  myTitle:"myTitle",
  myDate:"myDate",
  images: [
   { imageDate:"date", imagePath:"path"}
  ]
 }
]

在我的 HTML 中，我遍历数组：

<li *ngFor="let item of items">
   <div> {{ item.myTitle }}
</li>

我想做的是也为图像提取一个值。像这样：

<li *ngFor="let item of items">
   <div> {{ item.myTitle }}
   <ul>
     <li *ngFor="let image of item">
       {{ image.imagePath }}
     </li>
   </ul>
</li>

是否可以遍历图像数组并引用特定值？

Answer 1

这样试试：

<li *ngFor="let item of items">
   <div> {{ item.myTitle }} </div>
   <ul>
     <li *ngFor="let image of item.images">
       {{ image.imagePath }}
     </li>
   </ul>
</li>

Answer 2

Here is example

.ts

 items=[
 {
  myTitle:"myTitle one",
  myDate:"myDate",
  images: [
   { imageDate:"date", imagePath:"path"}
  ]
 },
 {
  myTitle:"myTitle two",
  myDate:"myDate",
  images: [
   { imageDate:"date", imagePath:"path"}
  ]
 },
 {
  myTitle:"myTitle three",
  myDate:"myDate",
  images: [
   { imageDate:"date", imagePath:"path"}
  ]
 }
]

.html

<ul >
  <li *ngFor="let item of items">
    <span class="badge">{{ item.myTitle }}</span> 
     <div *ngFor="let image of item.images">
       {{ image.imagePath }}
     </div>
  </li>
</ul>

Angular 遍历对象数组

Angular Looping through an array of objects

arrays

angular

object

ngfor