Question

我想有条件地添加一个重要的日期选择器，但不要复制我的输入标签。

例如，如果我有这个：

.ts：

isDatePickerInputList: boolean[] = [false, true]

简单的方法是在* ngFor中有2个输入：第一个输入是普通输入，第二个输入是与matDatePicker链接的输入

但是我不想要这种解决方案，因为这将意味着复制我的输入标签

.html：

<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">

   <ng-container *ngIf="isDatePickerInput">
      <input [matDatepicker]="picker" matInput>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
   </ng-container>

   <ng-container *ngIf="!isDatePickerInput">
      <input matInput>
   </ng-container>

</ng-container>

我想要类似的东西（但当然实际上不起作用）：

<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">

   <input [matDatepicker]="isDatePickerInput ? 'picker' : ''" matInput>
   <ng-container *ngIf="isDatePickerInput">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
   </ng-container>
</ng-container>

Answer 1

<ng-container *ngFor="let isDatePickerInput of isDatePickerInputList">
    <ng-container *ngIf="isDatePickerInput"> text {{isDatePickerInput!.picker}} 
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
</ng-container>
</ng-container>

不要尝试，但一定不能正常工作，我想也许您会在这里找到有用的东西：angular template syntax

有条件地在mat-input上添加mat-datepicker

1 个答案: