从localhost获取数据

Question

我正在使用Angular 4进行项目。我遇到问题的部分是：有这么多学校，每所学校都有一个身份证号码，学校可能有一个或多个图像。我希望每个学校都有"kampus_id"和展示其形象。

我可以获取网址并显示图片但我了解学校有多少图片。并显示每个imags是滑块。我的代码是：

环境网址：resimUrl: 'http://localhost/mebresim/'

.ts文件：

 data.attributes.photo = environment.resimUrl + data.attributes.kampus_id + '.jpg';

.HTML文件：

<ngb-carousel>
  <ng-template ngbSlide>
    <img class="card-img-top img-fluid w-full" [src]="navbar.infoData.attributes.photo" alt="Okul Fotoğrafı Bulunamadı">
  </ng-template>
  <ng-template ngbSlide>
    <img class="card-img-top img-fluid w-full" [src]="navbar.infoData.attributes.photo" alt="Okul Fotoğrafı Bulunamadı">
  </ng-template>
  <ng-template ngbSlide>
    <img class="card-img-top img-fluid w-full" [src]="navbar.infoData.attributes.photo" alt="Okul Fotoğrafı Bulunamadı">
  </ng-template>
</ngb-carousel>

现在让我们说"kampus_id" = 12的学校有12.jpg，12_1.jpg和12_2.jpg等图像。

如何更改我的代码以显示滑块中的所有图像？

Answer 1

以下是迭代data.attributes.photos中保存的所有照片的方法，并为每个照片生成单独的幻灯片。

TypeScript：

data.attributes.photos = [ "12.jpg", "12_1.jpg", "12_2.jpg" ]

HTML：

<ngb-carousel>
    <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photos">
        <img class="card-img-top img-fluid w-full" [src]="photo" alt="Okul Fotoğrafı Bulunamadı">
    </ng-template>
</ngb-carousel>