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>

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

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>

角遍历对象数组

2 个答案: