Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

Alterar registro com mat-select

Estou utilizando o componente mat-select, o que está funcionando, corretamente. Quando clico em alterar, ele vai no banco de dados, faz a busca, retorna as informações, mas este componente não está sendo selecionando o valor que está no banco de dados.

    <mat-form-field class="formulario-full-width">
                  <mat-select placeholder="Modelo *" name="modelo" 
                    id="modelo" [(ngModel)]="modelo.modelo" 
                    ng-required [disabled]="alteracao"
                    (selectionChange)="escolherModelo()">
                    <mat-option>Nenhum</mat-option>
                    <mat-option *ngFor="let modelo of modelos" 
                      [value]="modelo">{{modelo.marcaModelo}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

O que está faltando ?

10 respostas

Fala aí Guilherme, tudo bem? Para deixa a opção selecioanda, você pode fazer um if:

<mat-option [selected]="modelo.marcaModelo === modelo.modelo" *ngFor="let modelo of modelos" [value]="modelo">{{modelo.marcaModelo}}</mat-option>

Espero ter ajudado.

Entendi. Achei que o componente já fazia isto automático, idêntico ao Primeng.

Vou testar e posto o resultado aqui

Não funcionou

Estranho, na teoria era para ter funcionado, consegue postar o código?

Fico no aguardo.

Código

Tentei assim:

    <mat-form-field class="formulario-full-width">
      <mat-select placeholder="Categoria *" name="categoria" 
        id="categoria" [(ngModel)]="modelo.categoria"
        [(value)]="modelo.categoria">
        <mat-option>Nenhum</mat-option>
        <mat-option *ngFor="let categoria of categorias" 
          [value]="categoria">{{categoria.descricao}}
        </mat-option>
      </mat-select>
    </mat-form-field>

Mas não funcionou: Documentação: https://material.angular.io/components/select/overview

Assim Funciona

        <mat-form-field>
          <select matNativeControl placeholder="Categoria *" [(ngModel)]="modelo.categoria" 
            name="categoria" id="categoria">
            <option value="" selected></option>
            <option *ngFor="let categoria of categorias" [value]="categoria">
              {{categoria.descricao}}
            </option>
          </select>
        </mat-form-field>

Boa Guilherme, fico feliz que tenha conseguido resolver.

Abraços e bons estudos.

solução!

Na verdade o código é este:

<mat-form-field class="formulario-full-width">
          <mat-select placeholder="Produto para venda" name="produtoVenda" 
            id="produtoVenda" [(ngModel)]="produtoVendaId">
            <mat-option>Nenhum</mat-option>
            <mat-option *ngFor="let produto of produtos" 
              [value]="produto.id">{{produto.descricao}}
            </mat-option>
          </mat-select>
        </mat-form-field>

E antes de salvar eu faço isto:

if (this.categoriaEscolhidaId !== undefined) {
      const categoria = new CategoriaModel();
      categoria.id = this.categoriaEscolhidaId;
      this.modelo.categoria = categoria;
}

Obrigado

Magina Guilherme, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.