Angular: Bagaimana cara mengembalikan semua data untuk item yang dipilih di mat-select pada mat-dialog sambil menyimpan kode untuk nilai default yang dipilih

Aug 17 2020

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

2 Eliseo Aug 17 2020 at 13:21

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>
Farrel Aug 17 2020 at 20:47

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: ""};
  }  
}