Mam mat-select, w którym opcje są wszystkimi obiektami zdefiniowanymi w tablicy. Próbuję ustawić wartość domyślną na jedną z opcji, jednak pozostaje ona zaznaczona podczas renderowania strony.
Mój plik maszynopisu zawiera:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
Mój plik HTML zawiera:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
Próbowałem ustawienie selected2
i tym value
się mat-option
zarówno do obiektu i to id, i spróbował wykorzystać zarówno [(value)]
i [(ngModel)]
w mat-select
, ale żaden z nich nie działa.
Używam materiału w wersji 2.0.0-beta.10
angular
typescript
angular-material2
William Moore
źródło
źródło
compareWith
. Jest bardziej elegancki.compareWith
, zobacz odpowiedź badis tutaj stackoverflow.com/questions/47333171/…Odpowiedzi:
Użyj powiązania dla wartości w szablonie.
Powinien być
W wybranej wartości użyj
ngModel
zamiastvalue
.Powinien być
Kompletny kod:
Na marginesie od wersji 2.0.0-beta.12 wybór materiału akceptuje teraz
mat-form-field
element jako element nadrzędny, dzięki czemu jest spójny z innymi kontrolkami wprowadzania materiału. Po aktualizacji zamieńdiv
element namat-form-field
element.źródło
mat-form-field
, to jest to..."used to wrap several Angular Material components and apply common Text field styles"
, więc nie to samo. Poza tym, że PO i również moja odpowiedź nie wspomniałFormControl
,FormGroup
lubFormControlName
.[compareWith]
Dyrektywa jest tym, czego użyliśmyUżyj
compareWith
funkcji, aby porównać wartości opcji z wybranymi wartościami. zobacz tutaj: https://material.angular.io/components/select/api#MatSelectW przypadku obiektu o następującej budowie:
Zdefiniuj znaczniki w ten sposób:
I zdefiniuj funkcję porównawczą w ten sposób:
źródło
Używam Angular 5 i formularzy reaktywnych z mat-select i nie mogę uzyskać żadnego z powyższych rozwiązań, aby wyświetlić wartość początkową.
Musiałem dodać [compareWith], aby poradzić sobie z różnymi typami używanymi w komponencie mat-select. Wewnętrznie wydaje się, że mat-select używa tablicy do przechowywania wybranej wartości. Jest to prawdopodobne, że ten sam kod będzie działał z wieloma zaznaczeniami, jeśli ten tryb jest włączony.
Angular Select Control Doc
Oto moje rozwiązanie:
Form Builder do zainicjowania kontrolki formularza:
Następnie zaimplementuj funkcję compareWith w swoim komponencie:
Następnie utwórz i wyeksportuj funkcję defineId (musiałem utworzyć samodzielną funkcję, aby mat-select mógł jej użyć):
Na koniec dodaj atrybut compareWith do swojego mat-select:
źródło
Należy je jako wiążące
[value]
wmat-option
jak poniżej,DEMO NA ŻYWO
źródło
Możesz po prostu zaimplementować własną funkcję porównania
[compareWith]="compareItems"
Zobacz także dokumentację . Tak więc cały kod wyglądałby tak:
aw pliku Typescript:
źródło
i1
lubi2
nie będzie.Jak już wspomniano w Angular 6, użycie ngModel w formach reaktywnych jest przestarzałe (i usunięte w Angular 7), więc zmodyfikowałem szablon i komponent w następujący sposób.
Szablon:
Główne części komponentu (
onChanges
i inne szczegóły zostały pominięte):Zwróć uwagę na this.filter.setValue (this.selected) w
ngOnInit
powyższym.Wydaje się, że działa w Angular 6.
źródło
[compareWith]
była świetnaZrobiłem to tak, jak w tych przykładach. Podjęto próbę ustawienia wartości opcji mat-select na wartość jednej z opcji mat. Ale zawiodło.
Moim błędem było zrobienie [(value)] = "someNumberVariable" do zmiennej typu numerycznego, podczas gdy te w mat-options były łańcuchami. Nawet jeśli wyglądałyby tak samo w szablonie, nie wybrałoby tej opcji.
Po przeanalizowaniu someNumberVariable do łańcucha wszystko było w porządku.
Wygląda więc na to, że musisz mieć wartości mat-select i mat-option nie tylko te same liczby (jeśli prezentujesz liczby), ale także niech będą typu string.
źródło
Rozwiązaniem dla mnie było:
TS:
Korzystanie z obiektu: {id: number, detalle: string}
źródło
Spróbuj tego!
źródło
Moje rozwiązanie jest trochę skomplikowane i prostsze.
Właśnie użyłem symbolu zastępczego . Domyślny kolor symbolu zastępczego materiału to
light gray
. Aby wyglądało na to, że opcja jest wybrana, po prostu manipulowałem CSS w następujący sposób:źródło
Powiązanie lub ustawienie wartości domyślnej działa tylko wtedy, gdy atrybut value w MatSelect jest porównywalny z atrybutem value powiązanym z MatOption . Jeśli przypiszesz
caption
swój przedmiot do atrybutu value elementu mat-option , musisz również ustawić domyślny element na mat-select nacaption
elementu. Jeśli łączyszId
swój przedmiot z opcją mat , musisz również powiązaćid
go z mat-select , a nie całym przedmiotem, podpisem lub jakimkolwiek innym, tylko tym samym polem.Ale musisz to zrobić z wiązaniem []
źródło
Postępowałem zgodnie z powyższym bardzo uważnie i nadal nie mogłem uzyskać wybranej początkowej wartości.
Powodem było to, że chociaż moja powiązana wartość została zdefiniowana jako ciąg znaków w skrypcie, moje zaplecze API zwracało liczbę.
Luźne pisanie w Javascript po prostu zmieniło typ w czasie wykonywania (bez błędów), co uniemożliwiło wybór wartości początkowej.
Składnik
Szablon
Rozwiązaniem była aktualizacja interfejsu API, aby zwracał wartość ciągu.
źródło
Bardzo prostym sposobem osiągnięcia tego jest użycie
formControl
wartości domyślnej,FormGroup
na przykład wewnątrz (opcjonalnie). Oto przykład użycia selektora jednostek do wejścia obszaru:ts
html
źródło
Porównanie liczby i ciągu znaków jest fałszywe , więc rzuć wybraną wartość na ciąg w ngOnInit i zadziała.
Miałem ten sam problem, wypełniłem mat-select wyliczeniem, używając
i miałem wartość wyliczenia, którą chciałem wybrać ...
Spędziłem kilka godzin walcząc z umysłem, próbując ustalić, dlaczego to nie działa. I zrobiłem to zaraz po wyrenderowaniu wszystkich zmiennych używanych w mat-select, kolekcji kluczy i wybranych ... jeśli masz ["0", "1", "2"] i chcesz wybrać 1 ( która jest liczbą) 1 == „1” jest fałszem i dlatego nic nie jest wybierane.
więc rozwiązaniem jest rzutowanie wybranej wartości na ciąg w ngOnInit i to zadziała.
źródło
Ja to zrobiłem.
Zwykle możesz to zrobić
[value]="option"
, chyba że masz opcje z jakiejś bazy danych? Myślę, że opóźnienie w uzyskaniu danych powoduje, że nie działają, albo otrzymane obiekty są w jakiś sposób różne, mimo że są takie same? Co dziwne, najprawdopodobniej jest to późniejsze, ponieważ też próbowałem[value]="option === selected ? selected : option"
i nie zadziałało.źródło
TS
HTML
źródło
źródło