dynamic selected option in angular from a service call-CodePudding

I have a scenario where the options are static but the service call returns which value needs to be selected.I have binded the variable to selectednode as shown below.The problem I face is when the service call returns the default value in dropdown is set not the new value.

sectionOrders: string[] = ["Select one", "Sequential", "Random - all content", "Random - subset of content"];
public selectednode: any = {
   sectionOrder: 'Select one',
 };

Then on service call I am setting the value of

itemStructurePopulateTree(formId:string)
  {
    this.service.getItemStructureInfo(this.examId,formId,this.candidateJourneyId).subscribe(data=>{
      console.log("Response from itemStructurePopulateTree",data)
      this.examForms = data.examForms;
       const initData = data.examSection;
        this.updateRandomCount(data.examSection);
        const initArrayData  = [initData];
        this.dataSource.data  = initArrayData;
        if (!this.treeControl.isExpanded(initData)) {
          this.treeControl.expand(initData);
        }
        this.selectednode = this.dataSource.data[0];
        if(this.selectednode && !this.selectednode.sectionOrder){
           this.selectednode.sectionOrder = "Select one";
         }
        this.selectedForm = { formId:data.selectedFormId,formName:data.selectedFormName,userAction:null};
        this.refreshTreeData()
      },
      error => console.log("Error occured",error)
      );
  }

HTML

  <select  id="sectionorder" name="sectionorder" 
        [(ngModel)]="selectednode.sectionOrder"  >
        <option *ngFor="let sectionOrder of sectionOrders;"   >
                   {{sectionOrder}} 
        </option>
      </select>

My select option does not work as selectednode.sectionOrder is set a different value after the service call and ngModel does not detect the change. Right now no option are getting selected. How do I solve this ? Please help.

CodePudding user response：

You have to try changeDetectRef

constructor(
   private changeRef: ChangeDetectorRef
) {
   this.event.subscribe('productLoad',(data:any) => {
      this.tempProduct = JSON.parse(localStorage.getItem('productList'));
   })
}

when you service call after set the variable add this line

this.changeRef.detectChanges();

and you should have to put await in your service and make your function async like

async itemStructurePopulateTree(formId:string)
 {
await this.service.getItemStructureInfo(this.examId,formId,this.candidateJourneyId).subscribe(data=>{
  console.log("Response from itemStructurePopulateTree",data)
  this.examForms = data.examForms;
   const initData = data.examSection;
    this.updateRandomCount(data.examSection);
    const initArrayData  = [initData];
    this.dataSource.data  = initArrayData;
    if (!this.treeControl.isExpanded(initData)) {
      this.treeControl.expand(initData);
    }
    this.selectednode = this.dataSource.data[0];
    if(this.selectednode && !this.selectednode.sectionOrder){
       this.selectednode.sectionOrder = "Select one";
     }
    this.selectedForm = { formId:data.selectedFormId,formName:data.selectedFormName,userAction:null};
    this.refreshTreeData()
  },
  error => console.log("Error occured",error)
  );
}

CodePudding user response：

I am not sure what is wrong with your code. However you can check this working solution.

Dropdown with ng-model

<select name="project" [(ngModel)]="selectedProject" (change)="changeProject($event)">
        <option *ngFor="let opt of projects" [value]="opt.value">{{opt.value}}</option>
</select>

In ngOnit get the value from whatever source and bind it to ng-model property.

  ngOnInit(): void {
    this.dataService.getData().subscribe((result) => {
      this.selectedProject = result;
    })
  }

That's it.

Working demo:- https://stackblitz.com/edit/angular-ivy-fvnuqs?file=src/app/app.component.ts