Angular : 선택한 기본값에 대한 코드를 유지하면서 mat-dialog의 mat-select에서 선택한 항목에 대한 모든 데이터를 반환하는 방법
mat-select를 채우는 모달 매트 대화 상자가 있습니다. 드롭 다운은 언어로 채워집니다. (값)을 언어의 ID에 바인딩하여 데이터가 대화 상자에 전달되면 기본값으로 미리 선택할 수 있습니다. 그러나 드롭 다운에 표시된 "ID"와 "언어 설명"을 다시 가져오고 싶습니다. mat-dialog-close에서 mat-select의 데이터를 반환 할 때 두 데이터 필드를 모두 채우는 방법이 있습니까? "data.ID"및 "data.translation"을 다시받는 이유를 이해합니다. 선택한 "data.language"를 어떻게 채울 수 있습니까? 중요 : 드롭 다운은 이전에 언어를 선택한 경우 data.id로 미리 선택되므로 다른 방법이없는 한 기본값 기능을 잃지 않도록하십시오.
미리 감사드립니다.
.html
<div mat-dialog-content class="fullwidth">
<p>Select language to translate</p>
<mat-form-field class="fullwidth">
<mat-label>Language</mat-label>
<mat-select [(value)]="data.id">
<mat-option *ngFor="let langItem of languageList$;" [value]="langItem.value">
{{langItem.description}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="fullwidth">
<mat-label>Enter translation here</mat-label>
<textarea class="textarea" matInput placeholder="Ex. Translation here..." [(ngModel)]="data.translation"></textarea>
</mat-form-field>
</div> <div mat-dialog-actions> <button mat-stroked-button class="right" [mat-dialog-close]="data" cdkFocusInitial>Save</button> </div>
.ts
openTranslationDialog(event, elem): void {
const dialogRef = this.translateDialog.open(TranslationModalComponent, {
data: {id: String(this._transData?.id), language: this._transData?.language, translation: this._transData?.translation}
});
dialogRef.afterClosed().subscribe(result => {
console.log("Language Description: " + result.description);
console.log("Language ID: " + result.id); //only get ID back
});
}
json
{code: "1033", description: "Afrikaans", value: "100000001"}
{code: "1033", description: "Damara", value: "100000002"}
{code: "1033", description: "English", value: "100000000"}
{code: "1033", description: "German", value: "100000003"}
{code: "1033", description: "isiNdebele", value: "100000004"}
{code: "1033", description: "isiXhosa", value: "100000005"}
{code: "1033", description: "isiZulu", value: "100000006"}
답변
2 Eliseo
[mat-dialog-close]
구독 할 때 "결과"에서 받고 싶은 값을 표시 하는 위치에 있습니다. 따라서 TranslationModalComponent에서 함수를 만들 수 있습니다.
getData() {
const language = this.languageList$.find(
x => x.value == (this.data as any).id
);
return { ...this.data, ...language };
}
그리고 사용
<button [mat-dialog-close]="getData()" ...>Save</button>
Farrel
@Eliseo 덕분에 작동 한 마지막 코드 조각
getData() {
if ((this.languageService.languageList.length > 0) && ((this.data as any).id > 0))
{
const language = this.languageList.find(
x => x.value == (this.data as any).id
);
if (language)
return { id: language.value, language: language.description, translation: this.data.translation};
else
return { id: "", language: "", translation: ""};
}
}