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

【问题标题】：Define input type dynamically in HTML5 using Angular 2使用 Angular 2 在 HTML5 中动态定义输入类型
【发布时间】：2016-08-13 23:03:37
【问题描述】：

下面的代码似乎不起作用。在 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>

【问题讨论】：

标签： javascript html angular

【解决方案1】：

您的字符串字段似乎有错字。把代码改成这样：

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

由于type变量的值应该是一个字符串，你需要在它们周围加上引号，否则它们将被视为在关联范围内定义的变量。

所以最终的输出是：

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

【讨论】：

【解决方案2】：

试试这个：

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

注意日期和时间的引号

如果没有引号，date 和 time 将被视为范围变量。并且将使用它们的值（如果已定义）。

【讨论】：