Angular: ฉันจะส่งคืนข้อมูลทั้งหมดสำหรับรายการที่เลือกใน mat-select บน mat-dialog ได้อย่างไรในขณะที่เก็บรหัสสำหรับค่าเริ่มต้นที่เลือก
ฉันมีกล่องโต้ตอบ mat-modal ที่เติม mat-select รายการแบบเลื่อนลงจะมีภาษาต่างๆ ฉันผูก (ค่า) กับ ID ของภาษาเพื่อให้สามารถเลือกล่วงหน้าด้วยค่าเริ่มต้นหากข้อมูลถูกส่งไปยังกล่องโต้ตอบ อย่างไรก็ตามฉันต้องการนำ "ID" และ "คำอธิบายภาษา" ที่เห็นในเมนูแบบเลื่อนลงกลับมา มีวิธีเติมข้อมูลทั้งสองฟิลด์เมื่อส่งคืนข้อมูลของ mat-select บน mat-dialog-close หรือไม่? ฉันเข้าใจว่าเหตุใดฉันจึงได้รับ "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"}
คำตอบ
ซึ่งอยู่ใน[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>
รหัสชิ้นสุดท้ายที่ใช้งานได้ขอบคุณ @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: ""};
}
}