angular - 利用两个选择刷新角度选择选项

Question

我有这个选择：

模板：

<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>

在我的组件中，通过函数 getIdTipoVariacao() 我捕获了我选择的“variacao”的 id：

getIdTipoVariacao(variacao:string) { // take the id of one "tipo de variação" to send to function get-lista-valor-atributo to get the list of attributs of my "variation":
    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!');
          }
        })
  }

一切都很好，这个函数获取我的变体的 id 并发送到我的后端，我返回一个数组（this.listaAtributos），我必须与另一个选择相结合。

在我的第二个选择中，我做了一个 ngfor 尝试根据我的服务器的答案来配置选项，但没有一个数据是 copulate。如果我在 this.listaAtributos 中打印一个 console.log，我会看到我的数组包含我需要计算的数据。我怎样才能做到这一点？

我的第二个选择：

      <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>

可观察的？有人可以教我吗？

标签： angulartypescript