load mat-select's selected option from api

[topaz hearth]

i have a mat-select , in this ive loaded the options from an array which i get from the api, now when i need edit the submitted forms how do i load the previously selected value into this drop down options? i have the selected object but idk how to show it in the matselect as ```seleted="selectedobject"

    <mat-option
                      *ngFor="let travel of travelType"
                      [value]="travel.id"
                      >{{ travel.title }}</mat-option
                    >```

[zinc knoll]

<mat-select [(value)]="selected">

[topaz hearth]

not working html <mat-select formControlName="request" (selectionChange)="formArrayClearer(); AlternateTrip()" [(value)]="selectedTravelType.id" > <!-- <mat-option [value]="selectedTravelType.id">{{ selectedTravelType.title }}</mat-option> --> <mat-option *ngFor="let travel of travelType" [value]="travel.id" >{{ travel.title }}</mat-option > </mat-select>

[zinc knoll]

"Not working" is not helpful.
Post your ts code.

[topaz hearth]

i did

[zinc knoll]

Where?

[topaz hearth]

this

im confused on this

[zinc knoll]

that's template code.
Post your TypeScript one.

[topaz hearth]

u mean the arrya?

wait

[topaz hearth]

travelType =[
{
created: "2022-09-13T00:00:00+00:00"
id: 1
status: 0
title: "Train"
},
created: "2022-09-13T00:00:00+00:00"
id: 2
status: 0
title: "Flight"
},
]
selectedTravelType=[
{
created: "2022-09-13T00:00:00+00:00"
id: 2
status: 0
title: "Flight"
}]```
these are the values of both the arrays that i've called there in the select option

[zinc knoll]

Why selectedTravelType is an array?

[topaz hearth]

      request: new FormControl('', Validators.required),

    this.tourForm.get('request')?.patchValue(this.tourDetails.request);

i also tried patching the value with the required value

[topaz hearth]

yes

can also make it a string if necessary , i just made it an array by maping and filtering from the original array

idk wht i should do to display the tittle and patch the value

[zinc knoll]

That's non sense.
It doesn't need to be an array. You just need its position into the original array.

[topaz hearth]

in the api response i only recieve the id

[topaz hearth]

ohw

like mapping to the index of the original array?

[(value)]="travelType[selectredArrayIndex]"```

like this?

[zinc knoll]

[(value)]="travelType[selectedArrayIndex].id"

[topaz hearth]

will that also display the title in the option? travel.title below 👇

<mat-option                      *ngFor="let travel of travelType"
[value]="travel.id">
{{ travel.title }}
</mat-option>```

[zinc knoll]

did you try?

[topaz hearth]

yes

[zinc knoll]

And what did you get?

[topaz hearth]

nothing, its still stays with the placeholder but not any options

let ind = parseInt(this.tourDetails.request);
    console.log(ind);

    this.selectedTravelType = this.travelType.findIndex(
      (type) => type.id === ind
    );
    console.log(this.selectedTravelType, 'part of the obj');```
btw why does my findindex return a values lesser than the index

the index of the object is 2 but this returns 1

[zinc knoll]

Array indexes start at 0

copy paste exactly the html code you're using.

[topaz hearth]

yeh? should i do + 1?

ohh fuk

am sorry man

tht was dumb, i was looking at the id number instead of the array index

😅 /

[topaz hearth]

ccan u help with this?

[zinc knoll]

Again: copy paste the exact html you're using.

[topaz hearth]

okay

    <mat-select                    formControlName="request"
selectionChange)="formArrayClearer(); AlternateTrip()"
[(value)]="travelType[selectedTravelType].id">
<mat-option                      *ngFor="let travel of travelType"
[value]="travel.id"
>{{ travel.title }}
</mat-option>
</mat-select>```

  [(value)]="travelType[1].id"``` i even tried with a number in the index

[zinc knoll]

Try this way

this.selectedTravelType = this.travelType[1].value;

[(value)]="selectedTravelType"

[topaz hearth]

k

[topaz hearth]

still nothing ):

i getting that array from api, could it be the reason? slow rendering or something related to rendring?

[zinc knoll]

Make a minimal stackblitz reproduction

[topaz hearth]

it has 2 api calls shall i just show the functions in ss?

[zinc knoll]

mock an array with the response

[topaz hearth]

https://stackblitz.com/edit/angular-mat-select-data-icvgrd?file=app/select-form-example.html

[topaz hearth]

i knind figured where the problem lies, but idk wht causes the problem

if you remove the ngmodel in that , it works fine

i have formcontrol

so then patchValue should have worked but it didnt

[topaz hearth]

bruhhhhhhhhhhhhh, i figured it out T-T

im sooooooo sorry

the patch value worked

i just didnt convert the patch value to number type

it was on string type

now i did parseInt and it worked T-T

waste of an entire day for me, and waste of time for u