离子滑块 - 读取图像文件夹的内容

Question

现在我正在使用 Ionic 实现一个包含一些图像的简单视图，代码如下所示：

<ion-content padding>
<ion-slides pager>

<ion-slide style="background-color: white">
  <h2>Slide 1</h2>
  <img src="../../assets/img/animals/dog.jpg">
</ion-slide>

<ion-slide style="background-color: white">
  <h2>Slide 2</h2>
  <img src="../../assets/img/animals/horse.jpg">
</ion-slide>

<ion-slide style="background-color: white">
  <h2>Slide 3</h2>
  <img src="../../assets/img/animals/cat.jpg">
</ion-slide>

总的来说，我对 ionic 和 angular 还是很陌生，所以我想知道循环遍历整个 /img/animals 文件夹、扫描 .jpg 文件并为每个文件创建一个 <ion-slide> 的最佳方法是什么文件。由于还有很多资产尚未推出，我认为每次都为每个资产添加自定义代码是不切实际的。

Answer 1

你可以让你的模板遍历一个数组：

<ion-slide *ngFor="let slide of slides" style="background-color: white">
  <h2>{{ slide.title }}</h2>
  <img [src]="slide.url">
</ion-slide>

在你的组件中，定义这个变量“slides”：

class YouComponent {
  slides = [];
  someMethod() { }
}

在你的组件中的某个地方，你可以定义它：

someMethod() {
  this.slides = [
    { title: 'Title 1', url: 'url1.jpg' },
    { title: 'Title 2', url: 'url2.jpg' },
    { title: 'Title 3', url: 'url3.jpg' }
  ]
}

这个用来设置 this.slides 值的数组可以硬编码在你的组件 .ts 文件中，可以从配置文件中读取，可以从 API 端点检索，等等...但是问题是您将模板与数据分离。