Refresh select as selected from another select in angular

I have the following select:

Template:

<div class="select">
  <select (change)="getIdTipoVariacao(item.value.tipo)" formControlName="tipo" class="select-text">
    <option class="dropdown-item" selected>{{item.value.tipo || 'Tipo da Variação'}}</option>
    <option [hidden]="item.value.tipo == tipoVariacao.valor" *ngFor="let tipoVariacao of tiposvariacoes;let j = index"
      class="dropdown-item">{{tipoVariacao.valor}}</option>
  </select>


  <span class="select-highlight"></span>
  <span class="select-bar"></span>
</div>

In my component, through the getIdTipoVariacao () function I get the id of the selected variation:

getIdTipoVariacao(variacao:string) { // pega o id de um determinado tipo de variação para mandar para a função get-lista-valor-atributo para obter a lista de atributos daquela variação
    for(let i=0;i<this.tiposvariacoes.length;i++){
      if(this.tiposvariacoes[i].valor == variacao){
        this.idTipoVariacao = this.tiposvariacoes[i].id
      }
    }
this.listaValoresAtributo(this.idTipoVariacao);
}

  listaValoresAtributo(id: number){
    console.log(id)
    this.tipoProdutoService.listaValoresAtributo(id)
      .pipe(
        take(1)
      )
      .subscribe((res) => {
        console.log(res);
        this.listaAtributos = res.data.valores_atributos;
        this.loadingfiltro = false;
      },
        (err: HttpErrorResponse) => {

          if (err.status == 401) {
            this.authService.Logout();
          }

          if (err.error.data.erro) {
            this.toastrService.showToast(false, 'Ops, temos um problema', err.error.data.erro);
          } else {
            this.toastrService.showToast(false, 'Ops, temos um problema', 'Entre em contato com o suporte!');
          }
        })
  }

Everything working as expected, it takes the id of my variation and sends it to the server, which returns me an array (this.listAttributes) so I copulate the second select. But my second select is not being copulated when the response comes from the server.

In my second select I made an ngfor to try to copulate the options according to what was returned to me on the server, however no value is copulated. If I print console.log (this.listAttributes), I see the array with the data I need to copulate. How can I do this?

  <div class="col-md-2">
    <div class="select">
      <select formControlName="valor" class="select-text">
        <option class="dropdown-item" selected>{{item.value.valor || 'Valor'}}</option>
        <option *ngFor="let ValorAtributo of listaAtributos;let x = index"
          class="dropdown-item">{{ValorAtributo.valor}}</option>
      </select>


      <span class="select-highlight"></span>
      <span class="select-bar"></span>
    </div>

  </div>