mat-select option not showing selected value

[muhammedMoussa]

values display when open select, but when select one no action in option instead of displaying name of selected value.
data coming from api, when it was static was working fine? if this related.
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.2"

 <mat-form-field floatLabel="auto">
  <mat-select  formControlName="AccountTypeId">
    <mat-option *ngFor="let acc of account_types" [value]="acc.id">
      {{ acc.AccountTypeNameArabic }}
    </mat-option>
  </mat-select>
</mat-form-field>

[crisbeto]

Sorry, but this isn't a lot to go on. Closing for now, but it can be reopened if there's more info or a Stackblitz showing the issue.

[praveen3484]

I am also facing this issue in Angular 7.
I am using dynamic forms with formfactory in angular 7.
When I try to pass these values to the dropdown component then the material dropdown doesn't displays the selected value. The value is indeed there as I've checked it after debugging and on search, the value is passed correctly.
However, the value is not showing as pre-selected in the dropdown.
If I try to manually select any other value then it is displaying normally.

Here is the code from my dropdown component where I've used the material dropdown:
<mat-form-field> <mat-label >{{ model.label}}</mat-label> <mat-select [(value)] = "model.value" [formControlName]="model.key" [placeholder]="model.placeholder" [disabled]="model.disabled" (onChange)="onChange.emit($event)" (onInput)="onInput.emit($event)" (onFocus)="onFocus.emit($event)" (onBlur)="onBlur.emit($event)" [(ngModel)]="model.value" [value] = "1"> <mat-option *ngFor="let option of model.options" [value]="option.value">{{option.label}} </mat-option> </mat-select> </mat-form-field>
Here is the part of snippet from my actual parent ts file where I've used dynamic forms and used formfactory:
this.practiceDropdown= new Dropdown({ key: "practiceId", label: "Practice", });

I set value on this dropdown by following code:
setInputs() {; this.formDropdown.get("practiceId").setValue(this.practiceId); }

Please note that the dropdown works fine if I use Primeng dropdown in the dropdown component instead of the angular material dropdown.:
<p-dropdown [options]="options" [placeholder]="model.placeholder" [disabled]="model.disabled" [autoWidth]="false" (onChange)="onChange.emit($event)" (onInput)="onInput.emit($event)" (onFocus)="onFocus.emit($event)" (onBlur)="onBlur.emit($event)" [formControlName]="model.key" ></p-dropdown>

Any leads would be appreciated.
Cheers!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}