Form-select como fazer para utilizar

Programação
#1

Boa tarde!
Quando vou atualizar um objeto rua, preciso selecionar o distrito, no entanto, o formulario retorna apenas o atual distrito vinculado a rua, qual evento poderia BuscarDistritos() e prencher o selectBox, caso o usuário queira selecionar outro distrto?

image
image1092×594 28.3 KB 

<div class="form-group">     
                     <label for="distrito" class="form-label">DISTRITO</label>
                     <select class="form-select" id="distrito" formControlName="distrito" required style="background-color: lightblue;">
                        <option value="" disabled>Selecione Distrito</option>
                        <option *ngFor="let distrito of distritos" [ngValue]="distrito" onclick="BuscarDistritos()">
                            {{distrito.id}}
                            {{distrito.nome}}
                            </option>
                       </select>
                     </div>
                <br>     
                <br>
                <div class="botao">
                    <button (click)="OnSubmit()" class="btn btn-danger">Cadastrar</button>
               </div>
               </div>
            </form>
            <p>Form value: {{ formulario.value | json }}</p>

componente

@Component({
  selector: 'app-atualizar-rua',
  templateUrl: './atualizar-rua.component.html',
  styleUrls: ['./atualizar-rua.component.css']
})

////////CLASSE COMPONENTE USADO PARA EDITAR UM RUA/////////

export class AtualizarRuaComponent implements OnInit {

  distritos:Distrito[]=[];
  distrito:Distrito=new Distrito();
  rua:Rua=new Rua(); 

  constructor(private ruaService:RuaService, private distritoService:DistritoService,
              private formBuilder:FormBuilder, private router:Router) { }

              formulario: any = FormGroup;

  ngOnInit(): void {
    this.Atualizar();
  }
  ////////METODO USADO OARA SETAR O RUA NO FORMULARIO UM PEDIDO/////////

  Atualizar(){
    let id= localStorage.getItem("id");
    var numberValue = Number(id);
    this.ruaService.getRuaPorID(numberValue)
    .subscribe(data=>{  
      this.rua=data;

      //this.BuscaDistritos();  
      this.distritos.push(this.rua.distrito);

     this.formulario = this.formBuilder.group({
        id: [this.rua.id],
        logradouro: [this.rua.logradouro],
        cep: [this.rua.cep],
        distrito: [this.rua.distrito]
        })
    })
  }

  ///////RETORNA OS RUAPARA SELECTBOX SEREM SELECIONADO/////////////

  BuscaDistritos() {
    this.formulario.distrito = null;
    this.distritoService.getDistritos().subscribe(data => {
      console.log(data);
      this.distritos = data;
    });
  }

  ////METODO RESPONSAVEL PELO CADASTRO DO RUA///////////

  OnSubmit(){
    this.distrito = this.formulario.get('distrito').value
    console.log(" aqui "+this.distrito.id)
    this.rua.distrito = this.distrito;

    this.rua.logradouro = this.formulario.get('logradouro').value;
    this.rua.cep =this.formulario.get('cep').value; 
    

    console.log(this.rua);
    console.log(this.distrito);
    
   this.ruaService.createRua(this.rua)
   .subscribe(data=>{alert("Endereco Cadastrado Com Sucesso...!!!");

    this.router.navigate(["listarrua"]);
    this.formulario.reset(this.rua);
   },
   erro => {
    if(erro.status == 400) {
      console.log(erro);
      alert(erro.error.titulo);
    }
  })
  }

}
#2

Sigo no aguardo!