我想用 Angular 获取单选按钮的值

Question

我想获得我的单选按钮的值，特别是已选择的那个。我确实尝试通过以下代码来做到这一点： 我的 home.component.html

<span>Categories</span>
        <input type="button" onclick="alert($('input[name=category]:checked').attr('id'))" value="click me too" />
      <div id="categorybox">
      <tr  class="categories" *ngFor="let category of categories">
        <td>
          <input type="radio"  id={{category.category}} name="category" value="{{category}}"/>
          <label for ={{category.category}} >{{category.categoryName}}</label>
        </td>
      </tr>

    </div>

我在弹出窗口中变得不确定，我不知道为什么。我想使用 id 将信息传递给 http 请求，以便我可以按类别显示我的产品。我希望它从我的 api 链接到我的类别列表，这样当我添加一个类别时，它就会显示为单选按钮。我只需要通过我的函数来获得那个值。代码在 html 中以提高可读性。我想在单击按钮时获取按钮的值。

我的 home.component.ts

import { Component, OnInit } from '@angular/core';
import {Home} from '../model/Home';
import {HomeService} from '../service/Home.service';
import {Category} from '../model/Category';
import {CategoryService} from '../service/Category.service';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  page= 0;
  home: Home[];
  categories: Category[];

  constructor(private homeService: HomeService,private categoryService: CategoryService) { }

    Category($event){


    }


  SortPrice($event:any){
    let icon = document.getElementById("asc-desc1");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getByPriceAsc().subscribe(data => {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getByPriceDesc().subscribe(data => {
        this.home = data;
      });
    };

  }

  SortSale($event:any){
    let icon = document.getElementById("asc-desc2");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getBySaleAsc().subscribe(data => {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getBySaleDesc().subscribe(data => {
        this.home = data;
      });
    };

  }
  SortDiscount($event:any){
    let icon = document.getElementById("asc-desc3");
    if(icon.className === "fas fa-angle-down"){
      icon.className ="fas fa-angle-up";
      this.homeService.getByDiscountAsc().subscribe(data => {
      this.home = data;
    });
    }else{
      icon.className ="fas fa-angle-down"
      this.homeService.getByDiscountDesc().subscribe(data => {
        this.home = data;
      });
    };

  }

  ngOnInit() {

      this.homeService.getAll().subscribe(data => {
      this.home = data;
    });
    this.categoryService.getAll().subscribe(data => {
      this.categories = data;
    });

  }

}

Answer 1

可以绑定单选按钮的数据。

<input type="radio" [(ngModel)]="selectedCategory" name="category" value="{{category.category}}"
(change)="Category($event)"/>

然后在你的 TypeScript 文件中捕获事件；或者你可以使用模型selectedCategory。

Category(value) {
    console.log(" Value is : ", value );
}

Answer 2

你应该绑定你的收音机并添加一个点击事件。另外，我认为您的名字对于您的输入来说并不是唯一的。

在 TS 中：

<input type="radio"  id={{category.category}} [(ngModel)]=selectedCategory name="{{category.categoryName}}" value="{{category}}" (click)=selectCategory(category)/>

在 HTML 中：

export class HomeComponent implements OnInit {
   public selectedCategory: Category

   public selectCategory (category) {
      // do something here
      // this.selectedCategory will be the selected value
      // the category will be the value that was just selected
   }