Question

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

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

Answer 1

我之前用过

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

在您的组件中：

inputType: string = "radio"

Angular中的动态设置输入类型

1 个答案: