Angular Material: 매트 셀렉트 기본값 선택 안 함
mat-select 옵션이 배열에 정의되어 있는 모든 객체가 있습니다.값을 옵션 중 하나로 기본 설정하려고 하는데 페이지가 렌더링될 때 선택된 상태로 남아 있습니다.
내 타이프스크립트 파일에는 다음이 포함됩니다.
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>
i i i i ★★★★★★★★★★★★★★★★★★★★★★★★★★」selected2 및value…에mat-option, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id, id를 사용해 .[(value)] ★★★★★★★★★★★★★★★★★」[(ngModel)] mat-select동작하지 않습니다.
소재 버전 2.0.0-beta를 사용하고 있습니다.10
템플릿 값에는 바인딩을 사용합니다.
value="{{ option.id }}"
그래야 한다
[value]="option.id"
선택한 에는 "예"를 사용합니다.ngModelvalue.
<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;
}
Mat-select와 함께 Angular 5 및 reactive 형식을 사용하고 있는데 위의 솔루션 중 어느 것도 초기값을 표시할 수 없습니다.
나는 [비교]를 추가해야 했다.With]를 사용하여 매트 선택 컴포넌트 내에서 사용되는 다양한 유형을 처리합니다.내부적으로 mat-select는 선택한 값을 유지하기 위해 배열을 사용하는 것으로 보입니다.그러면 해당 모드가 켜져 있는 경우 동일한 코드가 여러 선택 항목에서 작동할 수 있습니다.
제 해결책은 다음과 같습니다.
양식 제어를 초기화하려면 Form Builder:
this.formGroup = this.fb.group({
country: new FormControl([ this.myRecord.country.id ] ),
...
});
그런 다음 비교를 구현합니다.컴포넌트에 기능이 있는 경우:
compareIds(id1: any, id2: any): boolean {
const a1 = determineId(id1);
const a2 = determineId(id2);
return a1 === a2;
}
다음으로 determinateId 함수를 생성하여 내보냅니다(mat-select에서 사용할 수 있도록 스탠드아론 함수를 작성해야 합니다).
export function determineId(id: any): string {
if (id.constructor.name === 'array' && id.length > 0) {
return '' + id[0];
}
return '' + id;
}
마지막으로 비교 추가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>
요.[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;
}
이것을 주의해 주세요.filter.setValue(이것).선택)의 경우ngOnInitabovedisclossible을 합니다.
Angular 6에서 작동하는 것 같아요.
페이지 로딩 시 첫 번째 옵션을 바인딩하는 데 문제가 있었습니다.아래는 나를 도와준 해결책이다.
.disclosed(비활성화)
<mat-form-field appearance="outline">
<mat-select #teamDropdown
[ngModel]="selectedGroupId" (selectionChange)="selectedGroupId=$event.value">
<mat-option value=undefined>Please Select</mat-option>
<mat-option *ngFor="let grp of groups" [value]="grp.groupsId">
{{grp.groupName}}
</mat-option>
</mat-select>
</mat-form-field>
.ts
@ViewChild('teamDropdown') teamDropdown: MatSelect;
ngAfterViewInit() {
setTimeout(() => {
this.teamDropdown.options.first.select();
});
}
나는 이 예시와 같이 그것을 했다.mat-select 값을 mat 옵션 중 하나의 값으로 설정하려고 했습니다.하지만 실패했습니다.
[(값)]를 잘못했다.="someNumberVariable"을 숫자 유형 변수로 변환합니다(mat-timeout 내의 변수는 문자열).템플릿에서 두 항목이 동일한 경우에도 이 옵션을 선택하지 않습니다.
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>
탐:
@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {
this.monedasList = res;
this.monedaSelect._onChange(res[0].id);
});
개체 사용: {id: number, detal: 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에 바인딩된 값 속성과 동일한 경우에만 작동합니다.바인드하는 경우captionmat-option 요소의 속성에 대한 항목 값 지정은 mat-select의 기본 요소를 다음과 같이 설정해야 합니다.caption신의의아아아아아「」를 바인드 Id아이템을 mat-option으로 바인드해야 합니다.id전체 항목, 캡션 또는 다른 항목이 아닌 동일한 필드만 선택할 수 있습니다.
그러나 [] 바인딩으로 해야 합니다.
나는 이 일을 했다.
<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"효과가 없었어요
저는 위의 내용을 주의 깊게 따랐지만 여전히 초기값을 선택하지 못했습니다.
그 이유는 bound 값이 typescript에서 문자열로 정의되었지만 백엔드 API가 숫자를 반환하고 있었기 때문입니다.
Javascript loose typing은 실행 시 (오류 없이) 단순히 유형을 변경했기 때문에 초기값을 선택할 수 없었습니다.
요소
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>
유일한 해결책은 mat select 태그 내의 폼 컨트롤 또는 Ng Model 값이 옵션 태그의 값에 할당된 텍스트와 일치해야 합니다.여기 Ts 파일입니다.
selectedFood = 'Tacos';
템플릿
<mat-form-field appearance="fill">
<mat-label>Favorite Food</mat-label>
<mat-select [(value)]="selectedFood">
<mat-option value=''>---------</mat-option>
<mat-option value='Tacos'>Tacos</mat-option>
<mat-option value='Pizza'>Pizza</mat-option>
</mat-select>
</mat-form-field>
<p>You selected: {{selectedFood}}</p>
숫자와 문자열의 비교에서는 false가 사용됩니다.따라서 선택한 값을 ngOnInit 내의 문자열에 캐스팅하면 동작합니다.
저도 같은 문제가 있어서 매트 셀렉트를 열거형으로 채웠어요
Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));
그리고 내가 선택하고자 하는 열거값이 있었다...
나는 그것이 왜 작동하지 않는지 알아내려고 몇 시간 동안 머리를 싸매고 있었다.mat-select에서 사용되는 모든 변수, 키 모음 및 선택한 변수들을 렌더링한 직후에 실행했습니다.["0","1","2"]가 있고 1(숫자)을 선택하려는 경우 1=="1"은 false이며 그 때문에 아무것도 선택되지 않습니다.
따라서 솔루션은 선택한 값을 ngOnInit 내의 문자열에 캐스트하면 동작합니다.
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>
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
YourFormGroup = FormGroup;
mode: 'create' | 'update' = 'create';
constructor(@Inject(MAT_DIALOG_DATA) private defaults: defautValuesCpnt,
private fb: FormBuilder,
private cd: ChangeDetectorRef) {
}
ngOnInit() {
if (this.defaults) {
this.mode = 'update';
} else {
this.defaults = {} as Cpnt;
}
this.YourFormGroup.patchValue({
...
fCtrlName: this.options2.find(x => x.name === this.defaults.name).id,
...
});
this.YourFormGroup = this.fb.group({
fCtrlName: [ , Validators.required]
});
} <div>
<mat-select formControlName="fCtrlName"> <mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>언급URL : https://stackoverflow.com/questions/47333171/angular-material-mat-select-not-selecting-default
'itsource' 카테고리의 다른 글
| 왜 '약속'일까?console.log가 아닌 React 컴포넌트에서 두 번 호출된 경우 (0) | 2023.03.28 |
|---|---|
| is 키워드는 타이프스크립트에서 어떤 역할을 합니까? (0) | 2023.03.28 |
| Python에서의 HTTP 응답 해석 (0) | 2023.03.28 |
| Json.NET의 부동/이중 소수점 이하(예: 용장 ".0" 없음)를 사용합니까? (0) | 2023.03.28 |
| Woocommerce 카트 페이지에서 배송 섹션을 삭제하는 방법 (0) | 2023.03.28 |