Angular中的动态设置输入类型

问题描述：

请任何人都可以解释为什么此代码不起作用，我尝试动态设置输入类型，但这不起作用。Angular中的动态设置输入类型

//our root app component 
import {Component, NgModule, VERSION} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form #f="ngForm"> 

     <input [type]="rtype" value="beef" name="food" [(ngModel)]="myFood"> Beef 
     <input [type]="rtype" value="lamb" name="food" [(ngModel)]="myFood"> Lamb 
     <input [type]="rtype" value="fish" name="food" [(ngModel)]="myFood"> Fish 
    </form> 

    <p>Form value: {{ f.value | json }}</p> <!-- {food: 'lamb' } --> 
    <p>myFood value: {{ myFood }}</p> <!-- 'lamb' --> 
    `, 
}) 
export class App { 
    name:string; 
    myFood = 'lamb'; 
    rtype='radio'; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule,FormsModule  ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

也是我尝试使用type={{rtype}}，但是这也并不工作

我读这https://angular.io/guide/template-syntax#html-attribute-vs-dom-property。但不明白为什么它不适用于Angular。可能是角度不叫https://angular.io/api/forms/RadioControlValueAccessor。请解释。

另外，当我在html中创建简单的广播，然后尝试从控制台更改输入类型属性它工作正常例如input.type =“radio”，成为input.type =“复选框”在浏览器中我看到该无线电改变为正常复选框。

我plnkr http://plnkr.co/edit/rwJPe2YZ9axMns0NaMNJ?p=preview

答

我之前

<input type="{{inputType}}" />

在你的组件中使用这样的：

inputType: string = "radio"

不幸的是，这是行不通的 – Chemaxa

Angular中的动态设置输入类型

相关推荐