Question

我正在尝试添加两个简单的单选按钮，以便用户选择性别。当我将两个[value]都设置为一个数值时，它可以很好地工作。如果我将其中之一更改为非数字值，我仍然可以选择两个选项，但是非数字选项会导致记录的值为undefined。如果将两个选项都设置为非数字值，则只能选择最后一个选项，再次导致该值为undefined。

component.html：

<div class="some-class">
  <div class="some-other-class">
    <input type="radio" id="male" name="gender" [value]="m" [(ngModel)]="Gender"
    />
    <label for="male">Male</label>
  </div>
</div>
<div class="some-class">
  <div class="some-other-class">
    <input type="radio" id="female" name="gender" [value]="f" [(ngModel)]="Gender"
    />
    <label for="female">Female</label>
  </div>
</div>

component.ts：

export class SomeComponent {
    Gender: string = null;

    someFunction() {
        console.log(this.Gender);
    }
}

我觉得我缺少一些非常明显的东西，但我找不到它，所以我们将不胜感激。

PS。我仍然可以只使用1和2作为值，但是我需要将值发送给API的API仅允许“ m”和“ f”表示性别。我知道将它们更改为1或2仅是一行，但这似乎是不必要的额外行。

Answer 1

[value]需要一个类似于组件属性的表达式。如果仅传递m，它将尝试访问组件上的属性m（显然是未定义的，您仅定义了Gender）。

尝试value="m"甚至[value]="'m'"。

Answer 2

您需要将[value]="m"替换为value="m"或value="'m'"，因为您使用的是静态的，并且仅当尝试通过变量分配值时才应使用属性绑定语法

在您的情况下，[value]属性绑定试图分别查找属性m和f，但找不到它

Answer 3

我在打字稿中使用数组，在模板中使用ngFor取得了很大的成功：

component.html：

<div class="some-class">
  <div class="some-other-class" *ngFor="let gender of genders">
    <label>
        <input type="radio" [value]="gender" [(ngModel)]="Gender"/>
        {{ gender }}
    </label>
  </div>
</div>

component.ts：

export class SomeComponent{
  genders: string[] = ['Male', 'Female', 'Other']
  Gender: string = null

  someFunction(){
    console.log(this.Gender)
  }
}

角度：无线电输入仅适用于数值

3 个答案: