利用两个选择以角度刷新选择选项

时间:2018-11-05 17:40:18

标签: angular typescript

我可以选择:

模板:

<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),我必须补全其他选择。

在我的第二个选择中,我尝试根据服务器的答案来填充选项,但是没有一个数据被填充。如果我在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>

可观察物?有人可以教我吗?

0 个答案:

没有答案