根据HTML类型输入

时间:2018-08-13 22:50:49

标签: html angular html5 typescript

我有以下代码:

<table class="details-table" *ngIf="animal && animaldata">
    <tr *ngFor="let attribute of animaldata.Attributes">
        <td class="details-property">{{ attribute.AttributeLabel }}</td>
        <td [ngSwitch]="attribute.AttributeType">
            <div *ngSwitchCase="'String'">
               <input *ngIf="attribute.IsWritable" matInput [(ngModel)] = "animal[attribute.AttributeKey]" />             
               <span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ animal[attribute.AttributeKey] }}</span>
            </div>
            <div *ngSwitchCase="'Boolean'">
              **{help needed}**
            <div *ngSwitchDefault>{{ animal[attribute.AttributeKey] }}
            </div>
        </td>
    </tr>
</table>

我想根据样式的类型(例如,字符串,布尔值,整数)显示不同的输入字段(基于其是否可写)。我对字符串有一个想法,但我想为布尔值做一个下拉列表。也是Integer的纯文本吗? 。我尝试了一些在网上找到的下拉列表示例,但我觉得自己做错了。谁能提供一个可以实现的想法?如果这是可以简化代码的正确方法,还可以有人评论吗? 。任何帮助深表感谢 。

谢谢

1 个答案:

答案 0 :(得分:2)

您可以像下面那样轻松设置下拉菜单

<div *ngSwitchCase="'Boolean'">
<select *ngIf="attribute.IsWritable" [(ngModel)]="yourProperty">
  <option (value)="1">Select One</option>
  <option (value)="2">Select Two</option>
</select>

<span *ngIf="!attribute.IsWritable && attribute.IsReadable">{{ 
       animal[attribute.AttributeKey] }}</span>

您似乎错过了结帐部门