Issue
I got a problem in angular framework
when I click to choose value form ng-for
<tr *ngFor="let dept of department" (click)="clinicChoose(dept)">
<td class="text-center">{{dept.sectionCode}}</td>
<td>{{dept.sectionName}}</td>
<td class="text-center" [style.color]="dept.flagStatus == 0 ? 'blue' : 'red'"></td>
</tr>
in clinicChoose function is
clinicChoose(dept: CSection) {
this.clinic = dept
}
and then at the UI when I change value in this.clinic
like this.clinic.flagStatus == 1
value that I choose in table is change too!!
I don’t want it change, so what should I do?
when click row (red) on table I will get data (green)
but when I change something, data in table that I choose is changed too whyyyyyyy
Solution
You should perform a deep cloning of your dept
when assigning it. So, create a function (or use a library) that clones an object and assign it like this.clinic = deepClone(dept)
; Your this.clinic
will be a separate object now and will not affect the original list anymore.