时间戳

首页 > 解决方案 > Angular：如何在 mat-dialog 上的 mat-select 中返回所选项目的所有数据，同时保留所选默认值的代码

html - Angular：如何在 mat-dialog 上的 mat-select 中返回所选项目的所有数据，同时保留所选默认值的代码

问题描述

我有一个填充垫选择的模态垫对话框。下拉列表中填充了语言。我将（值）绑定到语言的 ID，因此如果将数据传递到对话框中，可以使用默认值预先选择它。但是，我想带回下拉菜单中看到的“ID”和“语言描述”。在 mat-dialog-close 上返回 mat-select 的数据时，有没有办法填充两个数据字段？我确实理解为什么我要返回“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"}

标签： htmlangularangular-material

解决方案

它[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>

推荐阅读