Açısal: Seçili varsayılan değer için kodu saklarken, mat-select on mat-dialog'ta seçili öğe için tüm verileri nasıl döndürürüm
Bir mat-select'i dolduran modal bir mat-dialogum var. Açılır menü dillerle doldurulur. (Değer) 'i dilin kimliğine bağlıyorum, böylece veri iletişim kutusuna aktarılırsa varsayılan bir değerle önceden seçilebilir. Ancak, açılır menüde görülen "Kimlik" ve "dil açıklamasını" geri getirmek istiyorum. Mat-select on mat-dialog-close verisini döndürürken her iki veri alanını da doldurmanın bir yolu var mı? Neden "data.ID" ve "data.translation" i geri aldığımı anlıyorum, ancak "data.language" seçili olanı nasıl doldurabilirim? Önemli: açılır liste data.id ile önceden bir dil seçildiğinde seçilir, bu nedenle başka bir yol olmadığı sürece varsayılan değer işlevini kaybetmek istemeyin.
Şimdiden teşekkür ederim.
.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"}
Yanıtlar
İçinde [mat-dialog-close]
abone olduğunuzda "Sonuç" alınan istiyorsun hangi değer belirtmek nerede. Böylece TranslationModalComponent'inizde bir işlev oluşturabilirsiniz
getData() {
const language = this.languageList$.find(
x => x.value == (this.data as any).id
);
return { ...this.data, ...language };
}
Ve kullan
<button [mat-dialog-close]="getData()" ...>Save</button>
@Eliseo sayesinde işe yarayan son kod parçası
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: ""};
}
}