javascript - Angular:如何从单选按钮组获取数据并将其作为参数传递给方法？

Question

我有一个二选一单选组，我想获取其选定值并将其作为要导航到的参数之一传递。在我之前的半相关问题中，有人建议了这个解决方案:Angular2 - Radio Button Binding但我一直在尝试但未能使用它:

search.component.html:

 <form autocomplete="on" class="form-inline">
<input style="border-color: white; max-width: 300px" name="name" autofocus type="text" #name placeholder="Name..."
       class="form-control">
<div class=" btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn  btn-toggle active">
    <input type="radio" [(ngModel)]="realm" name="realm" [ng-value]="'Feronis'" autocomplete="off" checked> Feronis
  </label>
  <label class="btn  btn-toggle">
    <input type="radio" [(ngModel)]="realm" name="realm" [ng-value]="'Angrathar'" autocomplete="off"> Angrathar
  </label>
</div>
<button (click)="onSearch(name.value,realm)" class="btn btn-search">
  <span class="fa fa-search"></span></button>

我还尝试了 ngValue 和 value。

search.component.ts:

export class SearchComponent implements OnInit {

     realm: string;

onSearch(nameIn: string, realmIn: string) {
    console.log(this.realm); // undefined
    let nameCase = nameIn.charAt(0).toUpperCase() + 
                      nameIn.slice(1).toLowerCase();
    let realmCase = realmIn.charAt(0).toUpperCase() + // realmIn also undefined
                      realmIn.slice(1).toLowerCase();
    this.router.navigate(['/character', realmCase, nameCase])
}}

Can't bind to 'ngValue' since it isn't a known property of 'input'.

我还导入了
在 app.module.ts 和 search.component.ts

中导入 {FormsModule} from "@angular/forms";

Answer 1

这是工作示例:https://plnkr.co/edit/9YOV50bV1E9F9tH3Uw8a

似乎一切都很好，除了您希望预先选择第一个单选按钮。

您正在使用选中的属性进行预选择。现在，由于您使用的是 [ngModel]="realm"，ngModel 设置初始值。如果您的领域初始值未定义，则不会预先选择任何单选按钮。

在类中的领域中设置一些值，以获得预先选择的单选按钮，如上面的 plunker 中所示。