angular - *ngFor 问题中的 matDatepicker

Question

不知道如何命名 click 函数，以便它选择哪个 matdatepicker 被点击。现在，每当我更新一个日期时，它也会更新另一个日期。

<div class="row" *ngFor="let section of dSections; let i = index" >
    <div class="padding-bottom">
        <div class="row padding-bottom">
            <label>Date</label>
        </div>
        <div class="row">
            <div class="inputContainer">
                <input readonly
                       matInput
                       [(ngModel)]="date"
                       #myDate
                       name="myDate-{{i}}"
                       id="myDate-{{i}}"
                       placeholder="Select Date"
                       [matDatepicker]="myDatePicker"
                       (keypress)="$event.preventDefault()"
                       (dateChange)="convertMomentToDate($event.target.value, i)"
                       (click)="myDatePicker.open()">
                <button #myDatePickerButton id="myDatePickerButton-{{i}}"
                        (click)="myDatePicker.open()">
                    <img src="assets/images/icon-calendar.svg" alt="calendar icon"/>
                </button>
                <mat-datepicker #myDatePicker></mat-datepicker>
            </div>
        </div>
    </div>   

Answer 1

可能是因为 ngModel 绑定到“日期”，所以这是更新每个输入 [(ngModel)]="date" 的值。

尝试更改 ngFor 使其绑定到当前项目。假设 dSection 数组中的对象具有“日期”属性：

<div *ngFor="let section of dSections;let i = index;">
  <input  name="myDate-{{i}}" [(ngModel)]="dSections[i].date">

（为便于阅读，省略了其他属性）