Мне нужны все мои переключатели с [[ngModel)]

Question

Я выбираю только одну из моих кнопок, когда она мне нужна. Когда я нажимаю на любую кнопку, выбирается только последняя кнопка.

component.html
<input type="button" (click)="someFunction(categoryInput.value)" value="click me too" />
      <div id="categorybox">
      <tr  class="categories" *ngFor="let category of categories">
        <td>
            <input type="radio"  id={{category.categoryName}} [(ngModel)]=selectedCategory name="category" value="{{category}}" (click)=selectCategory(category)/>


          <label for ={{category.category}} >{{category.categoryName}}</label>
        </td>
      </tr>

component.ts
export class HomeComponent implements OnInit {
  page= 0;
  home: Home[];
  categories: Category[];
  selectedCategory: Category;
  selectCategory (category) {
    console.log(category.category);
    // do something here
    // this.selectedCategory will be the selected value
    // the category will be the value that was just selected
 }

Answer 1

В вашем коде много ошибок. Чтобы указать несколько

Вы не можете иметь tr внутри тега div У вас нет кавычек во многих ваших свойствах input теги не нуждаются в закрывающем теге и т. Д.

Предполагая, что у вас есть категории как

categories: any[] = [
{
  id: 1,
  name: "Category 1"
},
{
  id: 2,
  name: "Category 2"
},
{
  id: 3,
  name: "Category 3"
},
{
  id: 4,
  name: "Category 4"
}
];

, ваш шаблон должен выглядеть как

<table>
    <tr class="categories" *ngFor="let category of categories">
        <td>
            <input type="radio" id="{{category.id}}" name="category" value="{{category.id}}" (click)="SelectCategory(category)">
          <label for ={{category.id}}>{{category.name}}</label>
      </td>
  </tr>
</table>

, и вы можете получить доступ к выбранной категории в вашем классе компонентов как

this.SelectCategory = category;

Stackblitz в https://stackblitz.com/edit/angular-k7fp7v