Dev extreme dropdown value dont set properly values Angular

Question

I have 4 tables in my component. Tables are sorted based on property 'domen' from response I got from backend. this is response from backend, I have array of objects like this with difference in domen property, because tables are separated using domen values:

[
    {
        "katalogProizvodaId": 1,
        "apsDokument": {
            "katalogDokumentacijeId": 1002,
            "domen": 1,
            "dokumentTip": 5,
            "dokumentOpis": "Lična karta",
            "dokumentNaziv": "licna_karta",
            "napomena": "Lična karta",
            "generisanDokument": false,
            "datumKreiranja": "0001-01-01T00:00:00",
            "status": 0,
            "verzija": 0
        }
    },
]

Tables are separated properly. problem is that when I change values in dropdown it changes value only in first table( example: when I change value in second dropdown in second table it display changed value in first table in second dropdown, if I change another value in third table in second dropdown it will display changed value in first table in second dropdown, and values from second and third tables will stay empty.

this is ts file I create:

export class KatalogProizvodaComponent implements OnInit {
 katalogDokumentacije: IKatalogDokumentacijeProizvodaDto;
    katProiz: IDokumentacijaKatalogaProizvodaDto[] = [];
 public itms$: Observable<IKatalogProizvodaDto[]>;
    selectedAktivnost: IZahtjevAktivnostDto[];
    selectedAktivnosti: any;
    aktivnosti: IZahtjevAktivnostDto[];
    domeneArray: DomenDokumenta[] = [
        DomenDokumenta.KOMITENT,
        DomenDokumenta.ZAHTJEV,
        DomenDokumenta.PROIZVOD,
        DomenDokumenta.KOLATERAL,
    ];
    odabran: boolean[][] = [];
 constructor(
        private gs: GeneralService,
        public state: StateService,
        private adm: ApiAdminService,
        private apiDms: ApiDmsService,
        private frmBuilder: FormBuilder,
        public vs: ValidatorService,
    ) {
        this.inicijalizirajFormu();
    }
ngOnInit() {
        this.selectedAktivnost = this.state.aktivnosti;
        this.selectedAktivnosti = this.state.aktivnosti;
        this.aktivnosti = this.state.aktivnosti;
        this.itms$ = this.adm.dajKatalogProizvoda();
        this.itms$.subscribe((items) => {
            this.odabran = items.map(() => Array(items.length).fill(false));     
        });
    }
onCheckboxChange(tableIndex: number, rowIndex: number) {
        const isChecked = this.odabran[tableIndex][rowIndex];

        if (isChecked) {
            console.log(this.katalogDokumentacije, 'katalog');

            this.adm
                .dodajDokumentacijuNaProizvod(this.katalogDokumentacije)
                .subscribe(
                    () => {},
                    (err) => this.gs.displayException(err),
                );
        } else {
            const katalogDokumentacijeProizvodaId =
                this.katalogDokumentacije?.katalogDokumentacijeId;
            console.log(katalogDokumentacijeProizvodaId, 'id');

            if (katalogDokumentacijeProizvodaId) {
                this.adm
                    .obrisiDokumentSaKatalogaDokumentaProizvoda(
                        katalogDokumentacijeProizvodaId,
                    )
                    .subscribe(
                        () => {},
                        (err) => this.gs.displayException(err),
                    );
            }
        }
        this.ucitajSifarnike();
    }
filterKatalogPoDomenu(domen) {
        const filter = this.katProiz.filter(
            (k) => k.apsDokument.domen === domen,
        );
        return filter;
    }

    dajKatalogDokumentacijePoProizvodu(selId) {
        this.apiDms.dajDokumentacijuPoKataloguProizvoda(selId).subscribe(
            (k) => {
                // k.sort((a, b) => a.apsDokument.domen - b.apsDokument.domen)
                this.katProiz = k;
            },
            (err) => this.gs.displayException(err),
        );
    }

    ucitajDokumentaciju(katalogProizvodaId) {
        this.dajKatalogDokumentacijePoProizvodu(katalogProizvodaId);
    }
    onDataGridSelectionChanged(event: any, index: number) {
        console.log(event, 'event');
        const selectedRows = event.selectedRowsData;
        const concatenatedValues = selectedRows
            .map((row) => row.nazivAktivnosti)
            .join(', ');

        console.log(concatenatedValues, 'concatenatedValues');
        this.katProiz[index].concatenatedValues = concatenatedValues;
        this.katProiz[index].mogucUploadUAktivnostima = selectedRows.map(
            (row) => row.WfAktivnost,
        );
        console.log(
            this.katProiz[index].mogucUploadUAktivnostima,
            'moguc upload',
        );
    }

    onDropDownContentReady(e: any, data: any) {
        console.log(data, 'data');
        const concatenatedValues = data.concatenatedValues;
        console.log(concatenatedValues, 'concatenatedValues');
        e.component.option('displayValue', concatenatedValues);
    }
 onSingleDataGridSelectionChanged(event: any, index: number) {
        const selectedRows = event.selectedRowsData;
        const concatenatedValues = selectedRows
            .map((row) => row.nazivAktivnosti)
            .join(', ');
        this.katProiz[index].concatenatedValues = concatenatedValues;
        this.katProiz[index].mandatoranUploadUAktivnosti = selectedRows.map(
            (row) => row.WfAktivnost,
        );

        this.fgKat
            .get('mandatoranUploadUAktivnosti')
            .setValue(concatenatedValues);
    }

    getDomenNaziv(domen: number): string {
        switch (domen) {
            case 1:
                return 'Dokumentacija komitenta';
            case 3:
                return 'Dokumentacija zahtjeva';
            case 5:
                return 'Dokumentacija proizvoda';
            case 7:
                return 'Dokumentacija kolaterala';
        }
    }

this is part of ts file component I use. here is html file too:

<sa-widgets-grid>
  <sa-widget color="blue" *ngFor="let d of domeneArray">
    <header>
      <h2 i18n>{{ getDomenNaziv(d) }}</h2>
    </header>

    <div class="widget-body no-border">
      <div>
        <div class="form-group row flex-bottom">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th i18n>Naziv dokumenta</th>
                <th i18n>Odabran</th>
                <th i18n>Moguć upload u aktivnostima</th>
                <th i18n>Mandatoran upload</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let doc of filterKatalogPoDomenu(d); let i = index">
                <tr>
                  <td class="col-sm-5">{{ doc.apsDokument.dokumentOpis }}</td>
                  <td class="col-sm-1 checkbox-container">
                    <div class="checkbox-center">
                      <input type="checkbox" class="size-checkbox" [(ngModel)]="odabran[d][i]" (change)="onCheckboxChange(d, i)" />
                    </div>
                  </td>
                  <td class="col-sm-3">
                    <dx-drop-down-box
                      [(value)]="doc.mogucUploadUAktivnostima"
                      placeholder="odaberi aktivnosti..."
                      [dataSource]="selectedAktivnosti"
                      formControlName="mogucUploadUAktivnostima"
                      (onValueChanged)="onDropDownContentReady($event, doc)"
                      [displayExpr]="doc?.concatenatedValues"
                    >
                      <dx-data-grid
                        [selectedRowKeys]="doc.mogucUploadUAktivnostimaArray"
                        [dataSource]="aktivnosti"
                        [columns]="['nazivAktivnosti']"
                        [selection]="{ mode: 'multiple', showCheckBoxesMode: 'always' }"
                        [height]="200"
                        (onSelectionChanged)="onDataGridSelectionChanged($event, i)"
                      ></dx-data-grid>
                    </dx-drop-down-box>
                  </td>
                  <td class="col-sm-3">
                    <dx-drop-down-box
                      [(value)]="doc.mandatoranUploadUAktivnosti"
                      placeholder="odaberi aktivnosti..."
                      [dataSource]="selectedAktivnosti"
                      (onContentReady)="onSingleDataGridSelectionChanged($event, doc.id)"
                    >
                      <dx-data-grid
                        [selectedRowKeys]="doc.mogucUploadUAktivnostimaArray"
                        [dataSource]="aktivnosti"
                        [columns]="['nazivAktivnosti']"
                        [selection]="{ mode: 'single', showCheckBoxesMode: 'always' }"
                        [height]="200"
                        (onSelectionChanged)="onSingleDataGridSelectionChanged($event, i)"
                      ></dx-data-grid>
                    </dx-drop-down-box>
                  </td>
                </tr>
              </ng-container>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </sa-widget>
</sa-widgets-grid>