Angular中的动态设置输入类型答案

【问题标题】：Dynamic setting input type in AngularAngular中的动态设置输入类型
【发布时间】：2018-02-04 13:00:36
【问题描述】：

请任何人解释为什么这段代码不起作用，我尝试动态设置输入类型，但这不起作用。

//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="checkbox" 我看到收音机变成了普通的复选框。

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

【问题讨论】：

标签： javascript angular checkbox radio-button

【解决方案1】：

我以前用过这个

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

在您的组件中：

inputType: string = "radio"

【讨论】：