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

來源

2017-08-26 Chemaxa

我之前

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

在你的組件中使用這樣的：

inputType: string = "radio"

來源

2017-08-26 19:59:37 Haby

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

Angular中的動態設置輸入類型

回答

相關問題