각도 재질 : 매트 선택 기본값을 선택하지 않음

옵션이 배열에 정의 된 모든 객체 인 매트 선택이 있습니다. 옵션 중 하나를 기본값으로 설정하려고하지만 페이지가 렌더링 될 때 선택된 상태로 남아 있습니다.

내 typescript 파일에는 다음이 포함됩니다.

  public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

내 HTML 파일에는 다음이 포함됩니다.

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

내가 설정을 시도 selected2하고을 value의 mat-option목적과의 ID 모두, 모두 사용하여 시도 [(value)]및 [(ngModel)]에 mat-select, 그러나 아무도가 작동하지 않습니다.

재료 버전 2.0.0-beta.10을 사용하고 있습니다.

템플릿의 값에 바인딩을 사용합니다.

value="{{ option.id }}"

해야한다

[value]="option.id"

그리고 선택한 값 ngModel에서 value.

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

해야한다

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

완전한 코드 :

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

등의 측면에서 주 버전 2.0.0-beta.12 재료 선택 지금 받아들이 mat-form-field는 다른 재료 입력 컨트롤과 일치되도록 부모 요소로서 요소. 업그레이드 후 div요소를 mat-form-field요소로 대체하십시오 .

<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>

사용 compareWith, 함수는 선택된 값으로 옵션 값을 비교합니다. 여기를 참조하십시오 : https://material.angular.io/components/select/api#MatSelect

다음 구조의 객체 :

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

다음과 같이 마크 업을 정의하십시오.

<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>

그리고 다음과 같이 비교 함수를 정의하십시오.

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

저는 Angular 5와 반응 형을 mat-select와 함께 사용하고 있으며 위의 솔루션 중 하나를 사용하여 초기 값을 표시 할 수 없습니다.

매트 선택 구성 요소 내에서 사용되는 다른 유형을 처리하기 위해 [compareWith]를 추가해야했습니다. 내부적으로 mat-select는 선택된 값을 보유하기 위해 배열을 사용합니다. 이 모드가 켜져있는 경우 동일한 코드가 여러 선택 항목과 함께 작동 할 수 있습니다.

각도 선택 제어 문서

내 해결책은 다음과 같습니다.

양식 컨트롤을 초기화하는 양식 작성기 :

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

그런 다음 구성 요소에서 compareWith 함수를 구현하십시오.

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

다음으로 determinId 함수를 만들고 내 보냅니다 (mat-select에서 사용할 수 있도록 독립형 함수를 만들어야 함).

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

마지막으로 mat-select에 compareWith 속성을 추가하십시오.

<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>

당신은 그것을 바인딩해야 [value]에서 mat-option아래와 같이

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

라이브 데모

자신 만의 비교 기능을 간단히 구현할 수 있습니다.

[compareWith]="compareItems"

문서 도 참조하십시오 . 따라서 전체 코드는 다음과 같습니다.

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

그리고 Typescript 파일에서 :

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

Angular 6에서 이미 언급했듯이 반응 형으로 ngModel을 사용하는 것은 더 이상 사용되지 않으며 Angular 7에서는 제거되었으므로 다음과 같이 템플릿과 구성 요소를 수정했습니다.

템플릿 :

<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>

구성 요소의 주요 부분 ( onChanges및 기타 세부 사항은 생략 됨) :

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;
}

위의 this.filter.setValue (this.selected) 를 참고하십시오 ngOnInit.

Angular 6에서 작동하는 것 같습니다.

이 예제에서와 같이했습니다. mat-select의 값을 mat-options 중 하나의 값으로 설정하려고했습니다. 그러나 실패했습니다.

내 실수는 숫자 형 변수에 [(value)] = "someNumberVariable"을 수행하는 반면 mat-options의 변수는 문자열이었습니다. 템플릿에서 동일하게 보이지만 해당 옵션을 선택하지 않습니다.

someNumberVariable을 문자열로 파싱하면 모든 것이 완전히 괜찮 았습니다.

따라서 mat-select 및 mat-option 값은 동일한 숫자 일뿐만 아니라 (숫자를 제시하는 경우) 문자열 유형이어야합니다.

저에게 해결책은 다음과 같습니다.

<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);


});

개체 사용 : {id : number, detalle : string}

이 시도!

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

내 솔루션은 조금 까다 롭고 간단합니다.

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

방금 자리 표시자를 사용했습니다 . 재료 자리 표시 자의 기본 색상은입니다 light gray. 옵션이 선택된 것처럼 보이게하기 위해 다음과 같이 CSS를 조작했습니다.

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

바인딩 또는 기본 값으로 설정하면 경우에만 작동 값 에 대한 속성 MatSelect가 에 필적 값 에 바인더 제본 속성 MatOption . 바인딩하면caption 에 당신의 품목의 값 의 속성 매트 옵션 당신의 기본 요소로 설정해야합니다 요소 매트 - 선택 에 caption너무 귀하의 항목. 당신이 결합하는 경우 Id에 당신의 품목의 매트 옵션 , 당신은 바인딩해야 id에 매트 선택 도 아닌 전체 항목, 자막 또는 기타 만 같은 분야를.

그러나 당신은 바인딩 []로해야합니다

위의 내용을 매우 신중하게 따랐지만 여전히 초기 값을 선택할 수 없었습니다.

그 이유는 바인딩 된 값이 typescript에서 문자열로 정의되었지만 내 백엔드 API가 숫자를 반환했기 때문입니다.

Javascript 느슨한 입력은 단순히 런타임에 유형을 변경하여 (오류없이) 초기 값을 선택할 수 없게했습니다.

구성 요소

myBoundValue: string;

주형

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

해결책은 문자열 값을 반환하도록 API를 업데이트하는 것입니다.

이를 달성하는 매우 간단한 방법 은 예를 들어 (선택 사항) formControl안에 기본값과 함께를 사용하는 것 입니다 FormGroup. 다음은 영역 입력에 단위 선택기를 사용하는 예입니다.

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>

숫자와 문자열의 비교는 거짓으로 사용됩니다. 이므로 선택한 값을 ngOnInit 내의 문자열로 캐스팅하면 작동합니다.

나는 같은 문제가 있었고 mat-select를 열거 형으로 채웠습니다.

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

선택하고 싶은 enum 값이 있습니다.

나는 그것이 작동하지 않는 이유를 확인하기 위해 내 마음을 힘들게하는 데 몇 시간을 보냈다. 매트 선택, 키 컬렉션 및 선택된 변수에 사용되는 모든 변수를 렌더링 한 직후에 수행했습니다. [ "0", "1", "2"]가 있고 1을 선택하려는 경우 ( 숫자 임) 1 == "1"은 거짓이며 아무것도 선택되지 않았기 때문입니다.

따라서 해결책 은 선택한 값을 ngOnInit 내의 문자열 로 캐스팅 하는 것이며 작동합니다.

나는 이걸했다.

<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>

[value]="option"일부 데이터베이스에서 옵션을 얻지 않는 한 일반적으로 할 수 있습니까 ?? 데이터를 가져 오는 것이 지연되어 작동하지 않거나 객체가 동일하더라도 어떤 식 으로든 다른 것 같습니다.? 이상하게도 나도 시도했지만 [value]="option === selected ? selected : option"작동하지 않았기 때문에 나중에 가장 가능성이 높습니다 .

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>