Angular 6 - Как установить динамический тип при вводе html с использованием декоратора углового ввода

Question

Я передаю динамический тип для ввода, используя угловой @Input декоратор. Он не работает и показывает значение NaN => type="NaN". Как я могу достичь этого? Вот мой код:

datepicker.html

<input  class="{{ value ? 'has-value' : '' }}"
        type="{{inputType}}"
        [(ngModel)]="value"
        [max]="getToday()"/>

datepicker.ts

@Input() inputType: string;

app.html

<app-datepicker [inputType]="datetime-local"[(ngModel)]="example1"
      (ngModelChange)="filter()"></app-datepicker>

<app-datepicker [inputType]="date"[(ngModel)]="example2"
      (ngModelChange)="filter()"></app-datepicker>

Answer 1

Вам необходимо добавить '' к вашим привязкам, в противном случае средство выбора даты предполагает, что вы передаете объект, а не строку.Например: [inputType]="'datetime-local'"

<app-datepicker [inputType]="'datetime-local'"[(ngModel)]="example1"
      (ngModelChange)="filter()"></app-datepicker>

<app-datepicker [inputType]="'date'"[(ngModel)]="example2"
      (ngModelChange)="filter()"></app-datepicker>

Кроме того, вы можете удалить [] из атрибута следующим образом: Тогда вам не нужно добавлять ''

<app-datepicker inputType="datetime-local"[(ngModel)]="example1"
      (ngModelChange)="filter()"></app-datepicker>

<app-datepicker inputType="date"[(ngModel)]="example2"
      (ngModelChange)="filter()"></app-datepicker>

Answer 2

Вам необходимо связать type с переменной в

ChildComponent.html

<input [type]='type'>

ChildComponent.ts

@Input() type;

App.component.html

<select (change)='change($event)'>
  <option>number</option>
  <option>date</option>
  <option>datetime-local</option>
</select>

<app-child [type]='type'></app-child>

{{type}}

App.component.ts

type;
change(ev ) {
 this.type = event.target.value;
}