javascript - 类型错误 : Cannot read property '0' of undefined in angular2 for using index in datepicker

Question

我有日期输入字段，如果我单击添加，它会在前一个字段下方显示相同的字段。现在我这样写我的 HTML，所以它给出了错误 TypeError: Cannot read property '0' of undefined 和 page doesn't open only.. 任何人都可以帮助我解决这个问题。

HTML:

<md-card *ngFor="let positionDetails of positions; let i = index">
<div>
<md-input-container>
   <input mdInput type="text" name="positionDetails.position_start[i]" [ngModel]="positionDetails.position_start [i]| date:'dd/MM/yyyy'" (ngModelChange)="positionDetails.position_start[i] = $event" (focus)="openPosition()[i]" [readonly]="true">
   </md-input-container>
    <div *ngIf="showPosition">
        <datepicker [(ngModel)]="positionstart" name="positionDetails.ddv[i]" [showWeeks]="false" [maxDate]="positionend" (selectionDone)="onPositionStart($event)"></datepicker>
    </div>
</div>
</md-card>

TS:

this.positions = [{
      "position_start":"",
    }];
    openPosition(i){
      this.showPosition = true;
    }

    onPositionStart(event:any,i) {
      console.log(event);
      this.positionstart = event;
      console.log(this.positionstart);
      this.positionDetails.position_start = new Date(this.positionstart);
      console.log(this.positionDetails.position_start);
      this.showPosition = false;
    }

Answer 1

你应该在你的 ngFor 中使用范围 positionDetails。这将确保 ngFor 的每次迭代都是相互独立的。

<md-card *ngFor="let positionDetails of positions">
  <div>
    <md-input-container>
      <input mdInput type="text" [ngModel]="positionDetails.position_start | date:'dd/MM/yyyy'" (focus)="openPosition(positionDetails)" [readonly]="true">
    </md-input-container>
    <div *ngIf="positionDetails.showPosition">
      <datepicker [(ngModel)]="positionDetails.position_start" [showWeeks]="false" [maxDate]="positionend" (selectionDone)="onPositionStart($event, positionDetails)"></datepicker>
    </div>
  </div>
</md-card>

这意味着您必须更新您的方法以仅修改给定的 positionDetails

openPosition(positionDetails){
  positionDetails.showPosition = true;
}

onPositionStart(event: any, positionDetails) {
  positionDetails.position_start = new Date(event);
  positionDetails.showPosition = false;
}

并且还给每个迭代它自己的一组变量

this.positions = [{
  "position_start": "",
  "showPosition": false
}];