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])
}}

无法绑定到“ngValue”，因为它不是“输入”的已知属性。

我在 app.module.ts 和 search.component.ts 中也有 import {FormsModule} from "@angular/forms"; 的导入

Answer 1

下面是工作示例：https://plnkr.co/edit/9YOV50bV1E9F9tH3Uw8a

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

您正在使用选中的属性进行预选。现在因为你使用[ngModel]="realm"，ngModel 设置初始值。在您的情况下，领域的初始值未定义，没有一个单选按钮被预先选择。

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

Answer 2

只需使用value 而不是[ng-value]

例如

value="Feronis"

因为您在此处指定[ng-value]="'Feronis'" 时尝试使用静态字符串进行属性绑定 这等于使用像这样的 value 属性简单地赋值

value="Feronis"

解决方法：ERROR TypeError: Cannot read property 'charAt' of undefined

无需发送选择为参数的无线电值，只需像这样使用this.realm 获取值

console.log(nameIn, this.realm);

你的search 函数看起来像

(click)="onSearch(name.value)"

工作代码

<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" value="Feronis" autocomplete="off" checked> Feronis
      </label>
        <label class="btn  btn-toggle">
        <input type="radio" [(ngModel)]="realm" name="realm" value="Angrathar" autocomplete="off"> Angrathar
      </label>
    </div>
    <button (click)="onSearch(name.value)" class="btn btn-search">
      <span class="fa fa-search"></span></button>
</form>

onSearch(nameIn: string) {
    console.log(nameIn, this.realm);
 }