Dynamische Einstellung Eingabetyp in Angular

Question

Bitte kann jemand erklären, warum dieser Code nicht funktioniert, versuche ich Eingabearten dynamisch, aber das funktioniert nicht.

//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 {} 

ich versuche auch type={{rtype}} verwenden, aber dies auch nicht funktioniert

Ich bin dieses https://angular.io/guide/template-syntax#html-attribute-vs-dom-property lesen. Aber nicht verstehen, warum es in Angular nicht funktioniert. Kann Winkel nicht sein, Anruf https://angular.io/api/forms/RadioControlValueAccessor. Bitte erkläre.

Auch wenn ich einfach Radio in HTML erstellen, und dann versuchen, die Eingabeart-Eigenschaft von der Konsole zu ändern funktioniert es gut zum Beispiel war input.type = "radio", wurde input.type = "checkbox" in Browser ich sehe Dieses Radio wechselte auf das normale Kontrollkästchen.

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

Answer 1

ich verwendet, um dieses vor

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

In Ihrer Komponente:

inputType: string = "radio"