使用Angular 2在HTML5中动态定义输入类型

Question

Below code doesn't seem to be working. Is it even possible in Angular 2?

<table class="table table-responsive" style="border:0">
  <tr *ngFor="#column of columns" style="height:20px;">
      <td class="text-right" style="padding-top:10px;border:0">
          <h4> {{column | case}}: </h4>
      </td>
      <td class="text-center" style="padding-top:10px;border:0">
         <input type="{{column == 'created_date' ? date : text}}" class="form-control" />
      </td>
  </tr>
</table>

Answer 1

Try this:

 <input type="{{column == 'created_date' ? 'date' : 'text'}}" class="form-control" />

Notice the quotes around date and time

Without quotes, the date and time will be treated as scope variables. And their value(if defined) will be used.

Answer 2

You seems to have a typo for string fields. Change the code to this:

type="{{column == 'created_date' ? 'date' : 'text'}}"

Since the value of the type variable should be a string, you need to put quotes around them otherwise, they will be treated as a variable defined in the associated scope.

So the final output will be:

<input type="{{column == 'created_date' ? 'date' : 'text'}}" class="form-control" />