循环（ngfor）谁来设置"position"

Question

我想从位置 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>

真不知道怎么办

感谢您的帮助

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

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

}

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

循环（ngfor）谁来设置"position"

Loop (ngfor) who to set a "position"

angular

loops

ngfor

ionic4