Lier l'index dans le modèle Angular 2

Question

J'ai besoin d'un compteur commençant par 2.
Comment lier [mdDatepicker], [mdDatepickerToggle], #next_payment_ ?

<div formArrayName="next_payment">
  <div *ngFor="let payment of productForm.controls.next_payment.controls; let i=index" class="panel panel-default">
    <div class="panel-heading">
      <span>Payment {{i + 2}}</span>
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="productForm.controls.next_payment.controls.length > 1" (click)="removeNextPayment(i)"></span>
    </div>
    <div class="panel-body" [formGroupName]="i">
      <div class="form-group col-md-4">
        <md-input-container>
          <input mdInput [mdDatepicker]="'next_payment' + i + 2" [ngModel]="npd | date:'yyyy-MM-dd'" (ngModelChange)="npd = $event" placeholder="Date {{i + 2}}" formControlName="next_payment_date_{{i+2}}" id="next_payment_date_{{i+2}}">
          <button mdSuffix [mdDatepickerToggle]="'next_payment' + i + 2"></button>
        </md-input-container>
        <md-datepicker #next_payment_2></md-datepicker>
      </div>
    </div>
  </div>
</div>

Answer 1

Vous pourriez définir un composant enfant pour le contrôle et passer la valeur i comme attribut. Ainsi, vous pouvez toujours utiliser la variable de modèle locale #next_payment et la référencer pour [mdDatepicker], [mdDatepickerToggle].

HTML

composant du brevet :

  <div *ngFor="let payment of productForm.controls.next_payment.controls; let i=index" class="panel panel-default">
     <div class="panel-heading">
        <span>Payment {{i+2}}</span>
        <span class="glyphicon glyphicon-remove pull-right" 
               *ngIf="productForm.controls.next_payment.controls.length > 1" 
               (click)="removeNextPayment(index)"></span>
      </div>
      <my-payement-component [index]=i+2><my-payement-component>
  </div>

composant enfant :

<div class="panel-body" [formGroupName]="index">
    <div class="form-group col-md-4">
        <md-input-container>
            <input mdInput [mdDatepicker]="next_payment" [ngModel]="npd | date:'yyyy-MM-dd'" (ngModelChange)="npd = $event" placeholder="Date {{index}}"
                formControlName="next_payment_date" id="next_payment_date">
            <button mdSuffix [mdDatepickerToggle]="next_payment"></button>
        </md-input-container>
        <md-datepicker #next_payment></md-datepicker>
    </div>
</div>

TypeScript

composant enfant

.....
@Input() index: number;

Je n'ai pas pu tester ce code mais j'espère que vous comprenez l'idée.

Plunker