matDatepicker внутри * ng для выпуска - PullRequest
0 голосов
/ 05 февраля 2020

Не знаю, как назвать функцию щелчка, чтобы она уловила, какой 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>   

1 Ответ

0 голосов
/ 06 февраля 2020

Может быть потому, что ngModel привязывается к 'date', поэтому это обновляет значение для каждого входа [(ngModel)] = "date".

Попробуйте изменить ngFor, чтобы он привязывался к текущему элементу. Предполагая, что объекты в массиве dSection имеют свойство date:

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

(другие атрибуты пропущены для удобства чтения)

...