循环（ngfor）谁设置“位置”[重复]答案

【问题标题】：Loop (ngfor) who to set a "position" [duplicate]循环（ngfor）谁设置“位置”[重复]
【发布时间】：2019-08-13 20:29:04
【问题描述】：

例如，我想在位置 4 开始循环

有代码：

    <ion-slides>        
      <ion-slide  *ngFor="let img of [1,2,3,4,5,6,7,8,9,10,11]">
        <img src="{{img}}.jpg">
      </ion-slide>
    </ion-slides>

我真的不知道怎么办？？？？

感谢您的帮助

【问题讨论】：

标签： angular loops ngfor ionic4

【解决方案1】：

您可以在组件中编写一个对数组进行切片的方法：

您的模板代码：

    <ion-slides>        
      <ion-slide  *ngFor="let img of (sliceImages([1,2,3,4,5,6,7,8,9,10,11]))">
        <img src="{{img}}.jpg">
      </ion-slide>
    </ion-slides>

您的组件代码：

sliceImages(array: number[]): number[] {
    return array.slice(4);
}

另一种方式是SlicePipe:

您的模板代码：

    <ion-slides>        
      <ion-slide  *ngFor="let img of ([1,2,3,4,5,6,7,8,9,10,11] | slice : 4)">
        <img src="{{img}}.jpg">
      </ion-slide>
    </ion-slides>

【讨论】：

谢谢！！但是切片杀死了第4个img :(

【解决方案2】：

<ion-slides>        
      <ion-slide  *ngFor="let img of images [options]="opts">
        <img src="{{img}}.jpg">
      </ion-slide>
    </ion-slides>

组件

  @Component({
    templateUrl: 'build/pages/test/test.html',
})

export class TestPage implements OnInit{
    images= [1,2,3];
    opts: any;
    constructor() {}
    ngOnInit() {
            this.opts = {initialSlide: 5}
    }

}

【讨论】：

当我这样做时，它会占用数组中的 1, 2, 3 ,4 而我不想要那个。我想从第 4 位开始，但幻灯片可以转到第 3 或第 5 位......我希望你明白我的意思：D
哦，您希望能够从第四张图片开始，但仍然能够来回滑动？检查我的更新
没错！我尝试阅读如何使用 initialSlide 但我一无所获。我是编程新手。你能给我更多关于如何编写代码的细节吗？非常感谢 Flash
我很抱歉我的知识不好，我正在阅读以了解您如何在 ts 文件中声明“opts”，因为我有消息：Property 'Opts' does not exist on type .. .
你的第二种方式！但我收到此错误消息，因为我认为我没有正确定义“Opts”：[ng] 错误 in album.page.ts: Type '{ initialSlide: number;寻呼机：布尔值； }' 不可分配给类型 'any[]'。 [ng] 对象字面量只能指定已知属性，而 'initialSlide' 不存在于类型 'any[]' 中。

【解决方案3】：

@Flash 非常感谢您的帮助！！

这是我做的代码：

xxx.page.ts:

    export class AlbumPage implements OnInit {

      opts: object;

      imageArray = [
        '027A0200', '027A1238', '027A1399',
        '027A1543', '027A1905', '027A2103',
        '027A2344', '027A2503', '027A2529',
        '027A2557', '027A2591', '027A2605',
        '027A2670', '027A2728', '027A2770',
        '027A2885', '027A2995', '027A3010',
        '027A3018', '027A3106'
      ];

      constructor() { }

      ngOnInit() {
        this.opts = {
          initialSlide: 3,
          pager: true
        };
      }

    }

xxx.page.html

<ion-content>
  <div>
    <ion-slides [options] ="opts">        
      <ion-slide  *ngFor="let img of imageArray">
        <img src="../../../assets/Album/{{img}}.jpg" >
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

【讨论】：

是的，成功了！！：）我检查了！再次感谢 Flash