कोणीय: मैं चयनित डिफ़ॉल्ट मान के लिए कोड रखते हुए चटाई-संवाद पर मैट-चयन में चयनित आइटम के लिए सभी डेटा कैसे वापस करूं

Aug 17 2020

मेरे पास एक माडल-डायलॉग है, जो एक चटाई-चयन को दर्शाता है। ड्रॉपडाउन भाषाओं के साथ आबादी है। मैं भाषा के आईडी में मूल्य (मूल्य) बाँध रहा हूं, ताकि डेटा को डायलॉग में पास करने पर उसे डिफ़ॉल्ट मान के साथ बदला जा सके। हालांकि, मैं ड्रॉपडाउन में देखी गई "आईडी" और "भाषा विवरण" को वापस लाना चाहता हूं। क्या मैट-डायल-क्लोज़ पर मैट-चयन के डेटा को वापस करते समय दोनों डेटा फ़ील्ड को पॉप्युलेट करने का एक तरीका है? मुझे समझ में आ रहा है कि मुझे "data.ID" और "data.translation" वापस क्यों मिल रहा है, लेकिन मुझे "data.language" चयनित आबादी कैसे मिल सकती है? महत्वपूर्ण: ड्रॉपडाउन डेटा के साथ पूर्व-चयनित है। जब कोई भाषा पहले चुनी गई हो, तो तब तक डिफ़ॉल्ट मान कार्यक्षमता को खोना नहीं चाहता जब तक कि कोई दूसरा तरीका न हो।

पहले ही, आपका बहुत धन्यवाद।

.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

});
}

जसन

{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]जगह है जहाँ आप इंगित करते हैं कि सदस्यता के दौरान आप "परिणाम" में क्या मूल्य प्राप्त करना चाहते हैं। तो आप अपने TranslModalComponent में एक फंक्शन बना सकते हैं

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