Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

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.