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

Question

现在，我正在使用包含一些图像的离子实现一个简单的视图，并且代码看起来像这样：

<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>

我是离子和角度的新手，所以我想知道什么是循环整个/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>

在您的组件中，定义此变量"幻灯片"：

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' }
  ]
}

该数组被起诉以从此设置值。可以在组件.TS文件中刻苦编码，可以从配置文件中读取，可以从API端点中检索，等等...但是事实是，您将模板从数据中解脱出来。