angular refresh select options-CodePudding

i want to refresh the select B options once select A change how can i made this?

//select A
<select (change)="fasechange()" name="" [(ngModel)]="fase" id="">
   <option *ngFor="let item of arrayA">{{item.name}}</option>
</select>

//Select B
<select name="" [(ngModel)]="equipo1"  id="">
    <option *ngFor="let item of arrayB">{{item}}</option>
</select>

and in the change function for select A

arrayB: Array<string> = [];
fasechange(){
  for(let a of this.options){
    if(a.name == this.fase){
      this.arrayB.push(this.option.opt);
    }
  }
}

i ned to update, refresh the select B onnce the change function ends, how can i make this happen??? thanks for the help

CodePudding user response：

After Push You need to create new reference for arrayB.

 fasechange(){
      for(let a of this.options){
        if(a.name == this.fase){
          this.arrayB.push(this.option.opt);
          this.arrayB  = [...this.arrayB]
        }
      }
    }

CodePudding user response：

You could also use ChangeDetectorRef to force the update.

fasechange(){
  for(let a of this.options){
    if(a.name == this.fase){
      this.arrayB.push(this.option.opt);
      this.changeDetector.detectChanges(); // Inject it in your component constructor
    }
  }
}