angular 6 带有单选按钮的 ngModel 未传递任何数据

Question

我想 link 将表单内的单选按钮添加到对象，我无法让它工作！

我link将 ngModel 转换为一个名为 presentation

的字符串类型变量

我不知道我错过了什么？即使我复制了一个工作示例，它也不会在我的表单中工作！

这是我认为功能失调的部分表格： HTML:

<div class="uk-margin-large-right">

  <div class="uk-flex-inline ">
    <span class="uk-form-label uk-margin-small-right uk-text-bold "> Presentation </span>
    <label  class="uk-margin-medium-right">
      <input class="uk-radio " type="radio" name="radio1" value="Cephalic" [(ngModel)]="presentaion"> Cephalic  </label>
    <label class="uk-margin-medium-right">
      <input class="uk-radio" type="radio" name="radio1" value="Breech" [(ngModel)]="presentaion"> Breech </label>
      <label class="uk-margin-medium-right">
        <input class="uk-radio" type="radio" name="radio1" value="Transverse lie" [(ngModel)]="presentaion"> Transverse lie </label>

  </div>
  <p>this is {{presentation}}</p>
</div>

打字稿：

    import { Component, OnInit } from '@angular/core';
import { CommService } from '../services/comm.service';



@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {


  user = {
    Doctor: '',
    Patient: '',
    Type:'',
    Report: ''
  };

  presentation:'';


  constructor(private CommService: CommService) { }

  ngOnInit() {
    this.CommService.setData(this.user);
    console.log(this.presentation);
  }

}

Answer 1

如果你想给它初始值，就这样声明它

  presentaion:string = 'Cephalic';

  log() {  // log the value to console
    console.log(this.presentaion)
  }

模板

   <p>this is {{presentaion}}</p>
   <button (click)="log()">Log the value to console</button>

in your example there was a typo with the property name <p>this is {{presentation}}</p> just change it to presentaion

stackblitz example

angular 6 带有单选按钮的 ngModel 未传递任何数据

angular 6 ngModel with radio button not passing any data

javascript

button

radio

typescript

angular