Angular: Comment renvoyer toutes les données de l'élément sélectionné dans mat-select sur mat-dialog tout en conservant le code pour la valeur par défaut sélectionnée

Question

J'ai un mat-dialog modal remplissant un mat-select. La liste déroulante est remplie de langues. Je lie la (valeur) à l'ID de la langue afin qu'elle puisse être présélectionnée avec une valeur par défaut si des données sont transmises dans la boîte de dialogue. Cependant, je voudrais ramener le "ID" et la "description de la langue" vus dans la liste déroulante. Existe-t-il un moyen de remplir les deux champs de données lors du retour des données d'un mat-select sur mat-dialog-close ? Je comprends pourquoi je récupère "data.ID" et "data.translation", mais comment puis-je obtenir la sélection de "data.language" ? Important : la liste déroulante est présélectionnée avec data.id lorsqu'une langue a déjà été sélectionnée, donc ne voulez pas perdre la fonctionnalité de valeur par défaut à moins qu'il n'y ait un autre moyen.

Merci en avance.

.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"}

Answer 1

c'est dans le [mat-dialog-close]où vous indiquez quelle valeur voulez-vous recevoir dans le "résultat" lorsque vous vous abonnez. Ainsi, vous pouvez créer une fonction dans votre TranslationModalComponent

getData() {
    const language = this.languageList$.find(
      x => x.value == (this.data as any).id
    );
    return { ...this.data, ...language };
  }

Et utilise

<button [mat-dialog-close]="getData()" ...>Save</button>

Answer 2

Dernier morceau de code qui a fonctionné, merci à @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: ""};
  }  
}