Component in *ngFor not updating UI on data change


#1

I have created a set of Radio buttons using webfont icons to check or uncheck the selected item. All the other items in the list should uncheck when checking one.

I have a parent component passing option data to a child.

<GridLayout #optionGrid rows="auto,auto" columns="80,*" class="option-grid" *ngFor="let option of arrayData.option; let i of index;">
    <radiobutton [data]="option" [arrayData]='arrayData' (radioClick)="handleClick($event)"></radiobutton>
</GridLayout>

The radiobutton child component is like this:

<Button col="0" [text]="buttonIcon" [id]="item.id" [data-checked]="item.checked" (tap)="toggle($event)" class="fa-regular option-circle"></Button>
<Label col="1" [text]="item.option_text" class="option-label"></Label>

The button gets it’s icon set like this:

get buttonIcon(): string {
        if ( this.item.checked ) {
            return String.fromCharCode(0xf058);
        }
        else {
            return String.fromCharCode(0xf111);
        }
    }

I have ngOnChanges setup to listen for changes from the parent:

ngOnChanges(changes: SimpleChanges){   
        for (let property in changes ){
            if( property === 'data') {
                console.log('data changed')
                console.log(changes[property].currentValue);
                this.item = changes[property].currentValue;
            } 
        }

I emit changes to the parent:

toggle(args: EventData) {
        let elem = <Button>args.object;
        let itemcheck = elem.id;
        //this.item.checked = !this.item.checked;
        this.radioClick.emit({checked: !this.item.checked, id: itemcheck});
    }

I have both an input and Output on my child component:

@Input() data;
    @Output() radioClick = new EventEmitter;
    item;

I put a ngDoCheck in to see if the data is coming down and it does:

ngDoCheck() {
            console.log("change check on child");
            console.log("item checked", this.item.checked)
        }

However, only the item I click on changes it’s icon. The other icons if they had been previously clicked don’t unset. I’m wracking my brain here. Why does the data all seem to be proper if I log it and the event emitter is working, input working, but the UI does not properly update?


#2

try changeDetectionRef.detectChanges() and also try running you code inside NgZone


#3

It’s hard to debug without running code, I would suggest creating a playground example.

Beside there is already a plug-in that exposes native radio button and checkbox. You might want to try that.


#4

I looked at the plugin and it says it exposes android radio buttons. My app is cross platform, not android only.


#5

That seemed to work. I stuck a changDetectionRef.detectChanges() in the ngDoCheck and it worked. Thank you


#6

I meant this plugin which supports both platform.