我想用对象而不是字符串绑定(bind)单选按钮。为此,我尝试了与以下类似的代码:

<div *ngFor="let object of objects">
    <input type="radio" id="category" [(ngValue)]="object">
</div>

Angular 有没有办法用单选按钮的值绑定(bind)对象?

最佳答案

ngValue 不适用于单选按钮。它仅适用于 select 列表。

您可以使用 [value] 属性绑定(bind)语法将对象分配为所选单选按钮的值。

将此用于您的模板:

<div *ngFor="let object of objects">
  <input
    (change)="onCheck()"
    [(ngModel)]="selectedCategory"
    type="radio"
    id="category"
    [value]="object">
    {{ object.categoryValue }}
</div>

在你的类里面:
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  selectedCategory;

  objects = [
    {categoryName: 'Category1', categoryValue: 'Category1'},
    {categoryName: 'Category2', categoryValue: 'Category2'},
    {categoryName: 'Category3', categoryValue: 'Category3'},
  ];

  onCheck() {
    console.log(this.selectedCategory);
  }

}

这是给你的引用的 Sample StackBlitz

关于angular - 如何以 Angular 将输入 radio 值绑定(bind)到对象?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52660116/

10-16 06:18
查看更多