Angular 5-ngFor切片数组上的子索引

Question

I have a list lets call it answers of numbers and am taking slices of that array and displaying there value. What I'd like to do is also note the position of what place I want in the array...

<div *ngFor="let item of answers | slice: 3:6" class="float-left square">
    {{ item }}
</div>

I have tried:

<div *ngFor="let item of answers | slice: 3:6; index as i" class="float-left square">
    {{ item }} {{ i }}
</div>

But i results in 0,1,2 instead of the desired 3,4,5 respectively.

Thoughts? The idea using the index likely is bogus as I say this while searching before asking.

My Solution

So lots of folks had some great ideas; but, not really a fit.

<div *ngFor="let item of answers | slice: 60:63; index as i"
                (click)="pickSquare(60 +i)" id="{{60 + i}}"
                class="float-left square">{{item}}</div>

What I did was manually enter the start value to the pick the square, and created an ID so I could find the unique Div (still seems butt backwards).

In my .ts file I created a remember variable and created a pickSquare added a class to highlight that the square was picked. Then a generic find any "red" lets call it, to clear the board and place a new "red" picked square after the fact.

Being "new", I wish I could accept all answers as you were all a great help.

Answer 1

You could simply pad the index with the offset (3)

Something like this:

<div *ngFor="let item of answers | slice: 3:6; index as i" class="float-left square">
    {{ item }} {{ i+3 }}
</div>

---

StackBlitz Example

Answer 2

With slice you are looking at a new array of slice so the index will be reset. In console type [1,2,3,4,5,6,7].slice(3, 6) and see what happens. If that 3 is a variable you can do something like:

<div *ngFor="let item of answers | slice: offset:6; index as i" class="float-left square">{{item}} {{i + offset}}</div>

Answer 3

There are 2 methods for doing this.

1. You can add it to the index during the interpolation time like this.

   <div *ngFor="let item of answers | slice: 3:6; index as i" class="float-left square"> {{ item }} {{ i }} </div>

2. You can create a child component and pass the starting point value of the slice, the value to be printed and the index of the element.

Here is the stackblitz for the second point.

Hope this helps !!

Answer 4

Build your own loop based on the ngFor to return the original index from the array and set start, end slice value directly in the loop.

Create file for-with-slice.directive.ts and set this code. This is original ngFor with add slice options and realIndex variable.

import { ChangeDetectorRef, Directive, DoCheck, EmbeddedViewRef, Input, IterableChangeRecord, IterableChanges, IterableDiffer, IterableDiffers, NgIterable, OnChanges, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef, forwardRef, isDevMode } from '@angular/core';

/**
 * @stable
 */
export class ngForWithSliceOfContext<T> {
  constructor(
    public $implicit: T,
    public ngForWithSliceOf: NgIterable<T>,
    public index: number,
    public realIndex: number,
    public sliceStart: number,
    public sliceEnd: number,
    public count: number) { }

  get first(): boolean { return this.index === 0; }

  get last(): boolean { return this.index === this.count - 1; }

  get even(): boolean { return this.index % 2 === 0; }

  get odd(): boolean { return !this.even; }
}

@Directive({ selector: '[ngForWithSlice][ngForWithSliceOf]' })
export class NgForWithSliceOf<T> implements DoCheck, OnChanges {

  @Input() ngForWithSliceOf: NgIterable<T>;
  @Input() ngForWithSliceSliceStart: number = 0;
  @Input() ngForWithSliceSliceEnd: number;
  @Input()
  set ngForTrackBy(fn: TrackByFunction<T>) {
    if (isDevMode() && fn != null && typeof fn !== 'function') {

      if (<any>console && <any>console.warn) {
        console.warn(
          `trackBy must be a function, but received ${JSON.stringify(fn)}. ` +
          `See https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html#!#change-propagation for more information.`);
      }
    }
    this._trackByFn = fn;
  }

  get ngForTrackBy(): TrackByFunction<T> { return this._trackByFn; }

  private _differ: IterableDiffer<T> | null = null;
  private _trackByFn: TrackByFunction<T>;

  constructor(
    private _viewContainer: ViewContainerRef,
    private _template: TemplateRef<ngForWithSliceOfContext<T>>,
    private _differs: IterableDiffers) { }

  @Input()
  set ngForTemplate(value: TemplateRef<ngForWithSliceOfContext<T>>) {
    if (value) {
      this._template = value;
    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    if ('ngForWithSliceOf' in changes) {
      const value = changes['ngForWithSliceOf'].currentValue;
      if (!this._differ && value) {
        try {
          this._differ = this._differs.find(value).create(this.ngForTrackBy);
        } catch (e) {
          throw new Error(
            `Cannot find a differ supporting object '${value}' of type '${getTypeNameForDebugging(value)}'. NgFor only supports binding to Iterables such as Arrays.`);
        }
      }
    }
  }

  ngDoCheck(): void {
    if (this._differ) {
      const changes = this._differ.diff(this.ngForWithSliceOf);
      if (changes) this._applyChanges(changes);
    }
  }

  private _applyChanges(changes: IterableChanges<T>) {

    const insertTuples: RecordViewTuple<T>[] = [];
    changes.forEachOperation(
      (item: IterableChangeRecord<any>, adjustedPreviousIndex: number, currentIndex: number) => {
        let endOfArray = this.ngForWithSliceSliceEnd;
        if (typeof endOfArray === "undefined") {
          endOfArray = item.currentIndex + 1;
        }
        if (item.currentIndex >= this.ngForWithSliceSliceStart && item.currentIndex < endOfArray) {
          if (item.previousIndex == null) {
            const view = this._viewContainer.createEmbeddedView(
              this._template,
              new ngForWithSliceOfContext<T>(null!, this.ngForWithSliceOf, -1, -1, 0, 0, -1), currentIndex - this.ngForWithSliceSliceStart );
            const tuple = new RecordViewTuple<T>(item, view);
            insertTuples.push(tuple);
          } else if (currentIndex == null) {
            this._viewContainer.remove(adjustedPreviousIndex);
          } else {
            const view = this._viewContainer.get(adjustedPreviousIndex)!;
            this._viewContainer.move(view, currentIndex);
            const tuple = new RecordViewTuple(item, <EmbeddedViewRef<ngForWithSliceOfContext<T>>>view);
            insertTuples.push(tuple);
          }
        }
      });

    console.error(insertTuples)
    for (let i = 0; i < insertTuples.length; i++) {

      this._perViewChange(insertTuples[i].view, insertTuples[i].record);
    }

    for (let i = 0, ilen = this._viewContainer.length; i < ilen; i++) {
      const viewRef = <EmbeddedViewRef<ngForWithSliceOfContext<T>>>this._viewContainer.get(i);
      viewRef.context.index = i;
      viewRef.context.realIndex = i + this.ngForWithSliceSliceStart;
      viewRef.context.count = ilen;
    }

    changes.forEachIdentityChange((record: any) => {
      const viewRef =
        <EmbeddedViewRef<ngForWithSliceOfContext<T>>>this._viewContainer.get(record.currentIndex);
      viewRef.context.$implicit = record.item;
    });
  }

  private _perViewChange(
    view: EmbeddedViewRef<ngForWithSliceOfContext<T>>, record: IterableChangeRecord<any>) {
    view.context.$implicit = record.item;
  }
}

class RecordViewTuple<T> {
  constructor(public record: any, public view: EmbeddedViewRef<ngForWithSliceOfContext<T>>) { }
}

export function getTypeNameForDebugging(type: any): string {
  return type['name'] || typeof type;
}

Declaration and export in module:

import { NgForWithSliceOf } from './for-with-slice.directive'
...
@NgModule({
  imports:      [ ... ],
  declarations: [ ... NgForWithSliceOf ],
  bootstrap:    [ ... ],
  exports: [NgForWithSliceOf],
})

Use in template:

<div *ngForWithSlice="let thing of allTheThings; sliceStart: 2; sliceEnd: 7; realIndex as i; index as j">
  {{'Value: ' + thing}} {{'realIndex: ' + i}} {{' index: ' + j }}
</div>

component example array:

allTheThings = [0, 1, 2, 2,3,6,2,1];

StackBlitz Example