Angular: Bagaimana cara mengembalikan semua data untuk item yang dipilih di mat-select pada mat-dialog sambil menyimpan kode untuk nilai default yang dipilih
Saya memiliki modal mat-dialog yang mengisi mat-pilih. Menu tarik-turun diisi dengan bahasa. Saya mengikat (nilai) ke ID bahasa sehingga dapat dipilih sebelumnya dengan nilai default jika data dimasukkan ke dalam dialog. Namun, saya ingin mengembalikan "ID" dan "deskripsi bahasa" yang terlihat di tarik-turun. Apakah ada cara untuk mengisi kedua bidang data saat mengembalikan data mat-pilih pada mat-dialog-close? Saya mengerti mengapa saya mendapatkan kembali "data.ID" dan "data.translation", tetapi bagaimana saya bisa mendapatkan "data.language" yang dipilih terisi? Penting: dropdown telah dipilih sebelumnya dengan data.id ketika bahasa sebelumnya telah dipilih, jadi tidak ingin kehilangan fungsionalitas nilai default kecuali ada cara lain.
Terima kasih sebelumnya.
.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"}
Jawaban
itu di [mat-dialog-close]
mana Anda menunjukkan nilai apa yang ingin Anda terima di "hasil" saat berlangganan. Jadi, Anda dapat membuat fungsi di TranslationModalComponent Anda
getData() {
const language = this.languageList$.find(
x => x.value == (this.data as any).id
);
return { ...this.data, ...language };
}
Dan gunakan
<button [mat-dialog-close]="getData()" ...>Save</button>
Bagian terakhir kode yang berhasil, terima kasih kepada @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: ""};
}
}