data binding Angular 4

Question

I have a component with a variable say 'id' and in this component i'm calling a service that's take that variable(id) as parameter, in my template I assign the value of a radio Button to the variable(id).. the problem is ..I'm calling my Service in "ngOnInit()", so it doesn't take the value of the radio button , but takes the initial value of the "id".. Here is my code:

in my component:

 import { Component, OnInit } from '@angular/core';
 import { BartersService } from '../../core/services/barters.service'; 
 export class BarterViewComponent implements OnInit {
 id:string="";
 allCategories ;
 constructor( private barServ: BartersService) { }
 ngOnInit() {
 this.barServ.findByPage(this.id)
 .subscribe(respone => {
 this.allCategories = respone.data;
 });
 }
 onSelectionChange(val) {
 this.id = val;
 }
}

in my Template :

<div *ngFor="let cat of allCategories ; let i=index;"> 
 <input style="margin-bottom: 10px;" type="radio" #R 
 (change)="onSelectionChange(R.value )" name="rad" value="cat['id']"> 
 {{cat['name']}}
</div>

Target:

the target is updating the view based on the selection of the radio button.

• Günter Zöchbauer: What is the expected behavior?

Answer 1

Change this

value="cat['id']"

to

[value]="cat['id']" or value="{{cat['id']}}"

Answer 2

You can try this:

export class BarterViewComponent implements OnInit {
 id:string="";
 allCategories ;
 constructor( private barServ: BartersService) { }
 ngOnInit() {
 refreshCategories()
 }
 onSelectionChange(val) {
 this.id = val;
 refreshCategories()
 }
 refreshCategories() {
 this.barServ.findByPage(this.id).subscribe(respone => {
 this.allCategories = respone.data;
 });
 }
}

• Mohamed Gara: you can also pass the id as a param to refreshCategories().