角度2显示图像阵列

Question

我是角度2的新手,我有一个图像阵列,我想连续显示所有图像,但即使数组不为空也没有显示它我正在使用代码中所示的img标记

HTML代码:

<div fxLayout="column">


    <div >

    </div>

    <div fxLayout="row" *ngIf="doneLoadingProjectData" >
      <div  *ngFor="let image of images" >
          <img src='image'/>
      </div>

    </div>


</div>

Answer 1

在为src属性赋值时,需要使用大括号

<div  *ngFor="let image of images" >
  <img src='{{image}}'/>
</div>

或者您可以使用模板表达式:

<img [src]="image" />

Answer 2

此外，我相信图像数组需要是图像链接的数组（最好使用 JSON），只有当 ngFor 用于显示每个图像时，图像才会显示在浏览器上

<div *ngIf="images">
<ul>
  <li *ngFor="let image of images">
        <img [src]="image.href" />
  </li>
</ul>

另外我认为也许更好的是使用 ngOnInit 以便在调用该 div 时完成所有初始化

<div ngOnInit>
<ul>
  <li *ngFor="let image of images">
        <img [src]="image.href" />
  </li>
</ul>

在组件中，您可以根据需要运行代码

 images = [];
 ngOnInit() { type your code here it is similar to a constructor, here you can call your service or factory to get array of images you can initialize images here }

图像数组是这样的

{“图像”：[{“名称”：“图像1”，“href”：“ http://east-nj1.photos.example.org/987/nj1-1234 ”}，{“名称”：“图像2” , "href" : " http://east-nj1.photos.example.org/987/nj1-1234 " }, { "name" : "image3", "href" : " http://east-nj1. photos.example.org/987/nj1-1234 " }, { "name" : "image4", "href" : " http://east-nj1.photos.example.org/987/nj1-1234 " } ] }

复制 将此块引用粘贴到此链接中，您将了解数据如何传递链接您可以访问 JSON 值的每个属性，如 image.name 和 image.href。希望你觉得这很有用