Angular: как мне вернуть все данные для выбранного элемента в mat-select в mat-dialog, сохраняя код для выбранного значения по умолчанию

Aug 17 2020

У меня есть модальный диалог mat, заполняющий mat-select. Раскрывающийся список заполнен языками. Я привязываю (значение) к идентификатору языка, чтобы его можно было предварительно выбрать со значением по умолчанию, если данные передаются в диалоговое окно. Однако я хотел бы вернуть «ID» и «описание языка», показанные в раскрывающемся списке. Есть ли способ заполнить оба поля данных при возврате данных mat-select на mat-dialog-close? Я понимаю, почему я получаю обратно «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"}

Ответы

2 Eliseo Aug 17 2020 at 13:21

это в том месте, [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>
Farrel Aug 17 2020 at 20:47

Последний фрагмент кода, который сработал, благодаря @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: ""};
  }  
}