Радиокнопка Angular 6 не обновляет ngModel

Question

У меня есть радиогруппа:

<div class="btn-group">
  <div class="btn btn-outline-secondary"
  *ngFor="let category of categories">
    <input
    type="radio"
    [value]="category.id"
    [(ngModel)]="categoryModel.name">
     {{category.name}}
  </div>
</div>

Т.С.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],

})

export class Test {

  categories: {};
  categoryModel = {name: ''};

  constructor(private modalService: NgbModal) {
    this.categories = [{
      id: 1, name: 'test1',
    },
    {
      id: 2, name:  'test2'
    },
    {
      id: 3, name:  'test3',
    },
  ]
}

Когда я нажимаю на радио, моя модель не обновляется, {{categoryModel.name}} по-прежнему пуст, что с ним не так, как я могу это изменить?

Answer 1

// Рабочий код вы можете напрямую скопировать и вставить код и настроить в соответствии с вашими требованиями

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  categoryList: {};
  selectedCategory = { name: "" };

  constructor() {
    this.categoryList = [
      { id: 1, name: 'Option1' },
      { id: 2, name: 'Option2' },
      { id: 3, name: 'Option3' },
      { id: 4, name: 'Option4' },
      { id: 5, name: 'Option5' },
    ]
  }
}

<div>
<h1>  Seleted Option:  {{selectedCategory.id}}- 
  {{selectedCategory.name }}</h1>
  <div class="btn btn-outline-secondary"
  *ngFor="let cat of categoryList">
    <input
    type="radio"
    [value]="cat"
    [(ngModel)]="selectedCategory">
     {{cat.name}}
  </div>
</div>

Answer 2

Вместо привязки categoryModel.name, вы можете связать categoryModel, Чтобы заставить это работать, установите значения параметра в category и убедитесь, что переключатели имеют одинаковые name,

<div class="btn-group">
  <div *ngFor="let category of categories" class="btn btn-outline-secondary">
    <input
      type="radio"
      name="category"
      [value]="category"
      [(ngModel)]="categoryModel">
      {{category.name}}
  </div>
</div>

Смотрите этот стек для демонстрации.

Answer 3

Вы привязываетесь к значению radiobutton, которое равно id категории.

Вы можете использовать событие изменения, чтобы получить имя выбранной категории, например:

change(category_id){
 this.categoryModel.name = this.categories.find(c => c.id == category_id).name
}

Пример здесь: https://stackblitz.com/edit/angular-qeejnn?file=src%2Fapp%2Fapp.component.ts