Materiał kątowy: mat-select nie wybiera domyślnego

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 selected2i tym valuesię mat-optionzaró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

Użyj powiązania dla wartości w szablonie.

value="{{ option.id }}"

Powinien być

[value]="option.id"

W wybranej wartości użyj ngModelzamiast value.

<mat-select [(value)]="selected2">

Powinien być

<mat-select [(ngModel)]="selected2">

Kompletny kod:

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

Na marginesie od wersji 2.0.0-beta.12 wybór materiału akceptuje teraz mat-form-fieldelement jako element nadrzędny, dzięki czemu jest spójny z innymi kontrolkami wprowadzania materiału. Po aktualizacji zamień divelement na mat-form-fieldelement.

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

Użyj compareWithfunkcji, aby porównać wartości opcji z wybranymi wartościami. zobacz tutaj: https://material.angular.io/components/select/api#MatSelect

W przypadku obiektu o następującej budowie:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

Zdefiniuj znaczniki w ten sposób:

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

I zdefiniuj funkcję porównawczą w ten sposób:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

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:

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

Następnie zaimplementuj funkcję compareWith w swoim komponencie:

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

Następnie utwórz i wyeksportuj funkcję defineId (musiałem utworzyć samodzielną funkcję, aby mat-select mógł jej użyć):

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

Na koniec dodaj atrybut compareWith do swojego mat-select:

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>

Należy je jako wiążące [value]w mat-optionjak poniżej,

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

DEMO NA ŻYWO

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:

  <div>
    <mat-select
        [(value)]="selected2" [compareWith]="compareItems">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

aw pliku Typescript:

  compareItems(i1, i2) {
    return i1 && i2 && i1.id===i2.id;
  }

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:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

Główne części komponentu ( onChangesi inne szczegóły zostały pominięte):

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

Zwróć uwagę na this.filter.setValue (this.selected) w ngOnInitpowyższym.

Wydaje się, że działa w Angular 6.

Zrobił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.

Rozwiązaniem dla mnie było:

<mat-form-field>
  <mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
  <mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">{{moneda.detalle}}</mat-option>
</mat-select>

TS:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {

  this.monedasList = res;
  this.monedaSelect._onChange(res[0].id);


});

Korzystanie z obiektu: {id: number, detalle: string}

Spróbuj tego!

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList

Moje rozwiązanie jest trochę skomplikowane i prostsze.

<div>
    <mat-select
        [placeholder]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

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:

::ng-deep .mat-select-placeholder {
    color: black;
}

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 captionswój przedmiot do atrybutu value elementu mat-option , musisz również ustawić domyślny element na mat-select na captionelementu. Jeśli łączysz Idswój przedmiot z opcją mat , musisz również powiązać idgo z mat-select , a nie całym przedmiotem, podpisem lub jakimkolwiek innym, tylko tym samym polem.

Ale musisz to zrobić z wiązaniem []

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

myBoundValue: string;

Szablon

<mat-select [(ngModel)]="myBoundValue">

Rozwiązaniem była aktualizacja interfejsu API, aby zwracał wartość ciągu.

Bardzo prostym sposobem osiągnięcia tego jest użycie formControlwartości domyślnej, FormGroupna przykład wewnątrz (opcjonalnie). Oto przykład użycia selektora jednostek do wejścia obszaru:

ts

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

html

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

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

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

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.

Ja to zrobiłem.

<div>
    <mat-select [(ngModel)]="selected">
        <mat-option *ngFor="let option of options" 
            [value]="option.id === selected.id ? selected : option">
            {{ option.name }}
        </mat-option>
    </mat-select>
</div>

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.

TS

   optionsFG: FormGroup;
   this.optionsFG = this.fb.group({
       optionValue: [null, Validators.required]
   });

   this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

HTML

   <div class="text-right" [formGroup]="optionsFG">
     <mat-form-field>
         <mat-select placeholder="Category" formControlName="optionValue">
           <mat-option *ngFor="let option of options;let i =index" [value]="option">
            {{option.Value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  </div>