Eu tenho um mat-select onde as opções são todos os objetos definidos em uma matriz. Estou tentando definir o valor padrão para uma das opções, no entanto, ele está sendo deixado selecionado quando a página é renderizada.
Meu arquivo datilografado contém:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
Meu arquivo HTML contém:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
Eu tentei configurar selected2
e value
in mat-option
para o objeto e seu id, e tentei usar ambos [(value)]
e [(ngModel)]
no mat-select
, mas nenhum está funcionando.
Estou usando a versão do material 2.0.0-beta.10
angular
typescript
angular-material2
William Moore
fonte
fonte
compareWith
. É mais elegante.compareWith
, veja esta resposta aqui stackoverflow.com/questions/47333171/…Respostas:
Use uma ligação para o valor em seu modelo.
deveria estar
E no valor selecionado, use em
ngModel
vez devalue
.deveria estar
Código completo:
Em uma observação lateral, a partir da versão 2.0.0-beta.12, o material select agora aceita um
mat-form-field
elemento como o elemento pai, portanto, é consistente com os outros controles de entrada de material. Substitua odiv
elemento pelomat-form-field
elemento após a atualização.fonte
mat-form-field
, este é..."used to wrap several Angular Material components and apply common Text field styles"
, por isso, não é a mesma coisa. Diferente do que o OP e também a minha resposta não fez mençãoFormControl
,FormGroup
ouFormControlName
.[compareWith]
diretiva foi o que usamosUse
compareWith
uma função para comparar os valores das opções com os valores selecionados. veja aqui: https://material.angular.io/components/select/api#MatSelectPara um objeto com a seguinte estrutura:
Defina a marcação assim:
E defina a função de comparação assim:
fonte
Estou usando Angular 5 e formas reativas com mat-select e não consigo fazer com que nenhuma das soluções acima exiba o valor inicial.
Tive de adicionar [compareWith] para lidar com os diferentes tipos usados no componente de seleção de tapete. Internamente, parece que o mat-select usa uma matriz para manter o valor selecionado. Isso provavelmente permitirá que o mesmo código funcione com várias seleções se esse modo estiver ativado.
Angular Select Control Doc
Esta é minha solução:
Form Builder para inicializar o controle de formulário:
Em seguida, implemente a função compareWith em seu componente:
Em seguida, crie e exporte a função determineId (tive que criar uma função autônoma para que mat-select pudesse usá-la):
Por fim, adicione o atributo compareWith ao seu mat-select:
fonte
Você deve ser vinculativo, como
[value]
namat-option
como abaixo,DEMONSTRAÇÃO AO VIVO
fonte
Você pode simplesmente implementar sua própria função de comparação
[compareWith]="compareItems"
Veja também o docu . Portanto, o código completo seria:
e no arquivo Typescript:
fonte
i1
oui2
não existir.Como já mencionado no Angular 6, o uso de ngModel em formas reativas foi descontinuado (e removido no Angular 7), então modifiquei o modelo e o componente da seguinte maneira.
O modelo:
As partes principais do componente (
onChanges
e outros detalhes são omitidos):Nota this.filter.setValue (this.selected) em
ngOnInit
cima.Parece funcionar no Angular 6.
fonte
[compareWith]
foi ótimaEu fiz exatamente como nesses exemplos. Tentei definir o valor de seleção do tapete para o valor de uma das opções do tapete. Mas falhou.
Meu erro foi fazer [(value)] = "someNumberVariable" para uma variável de tipo numérico enquanto as de mat-options eram strings. Mesmo que parecessem iguais no modelo, não selecionaria essa opção.
Depois de analisar someNumberVariable em uma string, tudo ficou totalmente bem.
Portanto, parece que você precisa fazer com que os valores de seleção de tapete e opção de tapete não sejam apenas o mesmo número (se você estiver apresentando números), mas também que sejam do tipo string.
fonte
A solução para mim foi:
TS:
Usando o objeto: {id: number, detalle: string}
fonte
Experimente isso!
fonte
Minha solução é um pouco complicada e simples.
Acabei de usar o espaço reservado . A cor padrão do marcador de posição do material é
light gray
. Para fazer parecer que a opção está selecionada, apenas manipulei o CSS da seguinte maneira:fonte
A vinculação ou configuração do valor padrão funciona apenas se o atributo de valor em MatSelect for comparável ao atributo de valor vinculado a MatOption . Se você ligar
caption
do seu item de valor atributo de mat-opção elemento você deve definir o elemento padrão em mat-seleccionar acaption
de seu artigo também. Se você vincularId
seu item à opção mat , você deve vincularid
a seleção de tapete também, não um item inteiro, legenda ou qualquer outro, apenas o mesmo campo.Mas você precisa fazer isso com ligação []
fonte
Eu segui as instruções acima com muito cuidado e ainda não consegui selecionar o valor inicial.
O motivo era que, embora meu valor limite fosse definido como uma string no texto datilografado, minha API de back-end estava retornando um número.
A digitação livre de Javascript simplesmente alterou o tipo em tempo de execução (sem erros), o que impediu a seleção do valor inicial.
Componente
Modelo
A solução foi atualizar a API para retornar um valor de string.
fonte
Uma maneira muito simples de conseguir isso é usando um
formControl
com um valor padrão, dentro de umFormGroup
(opcional), por exemplo. Este é um exemplo usando um seletor de unidade para uma entrada de área:ts
html
fonte
Uma comparação entre um número e uma string costuma ser falsa , portanto, converta o valor selecionado em uma string dentro de ngOnInit e funcionará.
Eu tive o mesmo problema, preenchi o mat-select com um enum, usando
e eu tinha o valor enum que queria selecionar ...
Passei algumas horas lutando contra minha mente tentando identificar por que não estava funcionando. E fiz isso apenas depois de renderizar todas as variáveis sendo usadas no mat-select, na coleção de chaves e no selecionado ... se você tiver ["0", "1", "2"] e quiser selecionar 1 ( que é um número) 1 == "1" é falso e por isso nada é selecionado.
portanto, a solução é converter o valor selecionado em uma string dentro de ngOnInit e isso funcionará.
fonte
Eu fiz isso.
Normalmente você pode fazer
[value]="option"
, a menos que obtenha suas opções de algum banco de dados ?? Acho que ou o atraso na obtenção dos dados faz com que não funcionem ou os objetos obtidos são diferentes de alguma forma, embora sejam os mesmos ?? Estranhamente, é mais provável que seja o último, pois também tentei[value]="option === selected ? selected : option"
e não funcionou.fonte
TS
HTML
fonte
fonte