Переключатель с нажатой кнопкой Angular 6 не обновляет ngModel

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

<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>

ts

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}} по-прежнему пуста, что с ней не так, как я могу это изменить?


angular data-binding ngfor angular2-ngmodel
person emka26    schedule 10.09.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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>

person Salim Ansari    schedule 17.07.2019
comment
Круто, спасибо :) Хотя мне также пришлось добавить атрибут имени к переключателям, чтобы браузер знал, что они принадлежат к одной и той же группе кнопок. - person jgosar; 05.06.2020

arrow_upward
0
arrow_downward

Вы привязываетесь к значению переключателя, равному идентификатору категории.

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

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

person yannick    schedule 10.09.2018

arrow_upward
0
arrow_downward

Вместо привязки 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>

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

person ConnorsFan    schedule 10.09.2018