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 }

图像数组是这样的

{ ＆＃34;图像＆＃34; ：[ { ＆＃34;名称＆＃34; ：＆＃34; image1＆＃34;，＆＃34; HREF＆＃34; ：＆＃34; http://east-nj1.photos.example.org/987/nj1-1234＆＃34; }， { ＆＃34;名称＆＃34; ：＆＃34; image2＆＃34;，＆＃34; HREF＆＃34; ：＆＃34; http://east-nj1.photos.example.org/987/nj1-1234＆＃34; }， { ＆＃34;名称＆＃34; ：＆＃34; image3＆＃34;，＆＃34; HREF＆＃34; ：＆＃34; http://east-nj1.photos.example.org/987/nj1-1234＆＃34; }， { ＆＃34;名称＆＃34; ：＆＃34; image4＆＃34;，＆＃34; HREF＆＃34; ：＆＃34; http://east-nj1.photos.example.org/987/nj1-1234＆＃34; } ] }

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

角度2显示图像阵列

2 个答案: