mat-datepicker внутри * ngFor

Эта проблема возникала при использовании mat-datepicker внутри *ngFor.

mat-datepicker требуется ссылочная переменная шаблона #test для привязки к input.
Есть ли вообще прямой способ использовать ссылочные переменные при использовании внутри *ngFor? Я не мог найти выхода.

Простой рабочий пример без *ngFor

<mat-form-field>
  <input matInput [matDatepicker]="test" placeholder="Enter Date" [(ngModel)]="someDate" name="someDate">
  <mat-datepicker-toggle matSuffix [for]="test"></mat-datepicker-toggle>
  <mat-datepicker #test></mat-datepicker>
</mat-form-field>

Но поскольку шаблон reference variables должен быть уникальным для всего шаблона, вы не можете напрямую использовать mat-datepicker для сценария, когда указанный выше блок повторяется внутри *ngFor, test не будет уникальным.

Любые указатели будут полезны.


angular datepicker angular-material angular-forms
person bitscanbyte    schedule 23.03.2018    source источник
comment
Зачем нужно ставить этот # тест? Может быть, мы сможем добиться того, что вы хотите, другим способом   -  person Powkachu    schedule 23.03.2018
comment
@Powkachu Не могли бы вы поделиться примером?   -  person bitscanbyte    schedule 23.03.2018

Ответы (2)


arrow_upward
12
arrow_downward

Вы можете добавить индексную переменную к вашему ngFor и назначить значение этого индекса в качестве идентификатора для вашего datepicker. Вы также можете создать открытый массив значений внутри компонента, который имеет значение вроде ["dtPickerOne", "dtPickerTwo"], и использовать их в качестве значений.

<div *ngFor="let t of test; let i = index;">
         <input matInput [matDatepicker]="i" placeholder="Choose a date" [attr.id]="dtPicker + i"
         [formControl]="dateFrom">
         <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
         <mat-datepicker #i></mat-datepicker>   
    </div>
person theriddle2    schedule 23.03.2018
comment
Кажется, это работает, но вызывает странное поведение, если вы пытаетесь использовать i где-то еще в шаблоне, например, при интерполяции строк, вы не получаете 1 or 2 or 3, вы получаете [object object]. Для этого пришлось использовать другой let j=index. Было бы полезно, если бы был лучший способ использовать ссылочные переменные в шаблонных формах внутри *ngFor. Ваш второй подход кажется подходящим для довольно реактивных форм. - person bitscanbyte; 23.03.2018
comment
Как указано в @bitscanbyte, вам, возможно, придется использовать несколько операторов let x=index. Если вы используете реактивные формы с несколькими средствами выбора даты, вы можете использовать let i=index и [formGroupName]="i" и let j=index для первого средства выбора даты, как показано в ответе (за исключением использования j). Затем, чтобы использовать другие датпикеры в той же группе форм, добавьте еще let k=index, а затем используйте k в качестве ссылочной переменной шаблона и т. Д. - person Tim; 11.07.2018
comment
Привет, @ theriddle2, у меня есть вопрос, на который не ответили в программе выбора даты, можете ли вы попробовать его, пожалуйста, ссылка stackoverflow.com/questions/64278503 / - person kushal Baldev; 15.10.2020

arrow_upward
13
arrow_downward

Я хотел бы отметить, что вы можете использовать символ подчеркивания «_» в качестве разделителя, если хотите дать ему более значимое имя.

Вот рабочий пример с двухсторонней привязкой модели.

<div *ngFor="let patient of patients; let i = index;">
  <input matInput [matDatepicker]="patientDueDate_i" placeholder="Due date" 
    [(ngModel)]="patient.dueDate">
   <mat-datepicker-toggle matSuffix [for]="patientDueDate_i"></mat-datepicker-toggle>
   <mat-datepicker #patientDueDate_i></mat-datepicker>   
</div>
person Talnaci Sergiu Vlad    schedule 28.11.2018