कोणीय 6 सामग्री चटाई-चयन परिवर्तन विधि को हटा दिया गया

Question

कोणीय सामग्री डिजाइन 6 में, (परिवर्तन) विधि को हटा दिया गया था। मुझे पता नहीं है कि उपयोगकर्ता द्वारा चयन बदलने पर घटक में कोड निष्पादित करने के लिए परिवर्तन विधि को कैसे बदलें! धन्यवाद!

Answer 1

से इसे बदल changeकरने के लिए selectionChange।

<mat-select (change)="doSomething($event)">

अब है

<mat-select (selectionChange)="doSomething($event)">

https://material.angular.io/components/select/api

Comments

मुझे इससे बहुत नफरत है। कल मैंने सोचा कि यह कोणीय 6 में अपग्रेड करने के लिए एक अच्छा दिन था। एक बार फिर, उन्होंने वाक्य रचना को बदल दिया।

— लुइस लावेरी

(changeEventChange)जब परिवर्तन ईवेंट बदलता है, तो उन्हें पता लगाने के लिए एक ईवेंट की आवश्यकता होती है ।

— स्टैक अंडरफ्लो

(SelectionChange) अब (onSelectionChange) पर अपडेट किया गया है।

— देवदत्त

@Debadatta - आपने यह कहाँ देखा? मुझे अभी भी selectionChange सामग्री

— ।angular.io

ऊपर दिए गए सभी टिप्पणियां केवल इस बात पर प्रकाश डालती हैं कि नीचे दिए गए मेरे उत्तर के अनुसार, प्रतिक्रियाशील रूपों के साथ चिपकना क्यों उचित है। एक साइड नोट पर, मुझे नहीं लगता कि टिप्पणियां बहुत उचित हैं क्योंकि कोणीय सामग्री के लोग एक अद्भुत काम करते हैं और हम इसे मुफ्त में प्राप्त करते हैं।

— जोसेफ सिम्पसन

Answer 2

यदि आप प्रतिक्रियाशील रूपों का उपयोग कर रहे हैं तो आप चुनिंदा नियंत्रण में बदलाव के लिए सुन सकते हैं जैसे कि

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })

Comments

यह ध्यान देने योग्य है कि उपरोक्त प्रतिक्रियाशील रूपों के दृष्टिकोण का उपयोग करके आप यूआई से कम बंधे होते हैं और यूआई फ्रेमवर्क विकसित होने की संभावना कम होती है

— जोसेफ सिम्पसन

मुझे यह पसंद आया, मैं इसे आजमाऊंगा।

— उपयोगकर्ता

बस यहां ध्यान दें कि यदि आपको .updateValueAndValidityनियंत्रण की आवश्यकता है तो { emitEvent: false }बचने के लिए पास करना न भूलें RangeError: Maximum call stack size exceeded। दूसरी ओर संकेत (+1) के लिए धन्यवाद, यह मुझे उस चीज़ की ओर ले जाता है जिसकी मुझे ज़रूरत थी।

— dcg

यदि मैं दृष्टिकोण का पालन करूं तो क्या मुझे एनजीऑनस्ट्रो में सदस्यता समाप्त करनी चाहिए?

— ओहिडानो

मेमोरी लीक और अनपेक्षित व्यवहार से बचने के लिए आपको हमेशा अपने सब्सक्रिप्शन को साफ करना होगा।

— जोसेफ सिम्पसन

Answer 3

के लिये:

1) (selectionChange)="myFunction()"कोणीय में मैट-सेलेक्ट कार्य निम्नानुसार हैं:

sample.component.html

 <mat-select placeholder="Select your option" [(ngModel)]="option" name="action" 
      (selectionChange)="onChange()">
     <mat-option *ngFor="let option of actions" [value]="option">
       {{option}}
     </mat-option>
 </mat-select>

sample.component.ts

actions=['A','B','C'];
onChange() {
  //Do something
}

2) सरल HTML का चयन (change)="myFunction()"कोणीय में किया जाता है:

sample.component.html

<select (change)="onChange()" [(ngModel)]="regObj.status">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

sample.component.ts

onChange() {
  //Do something
}

Answer 4

मेरे लिए (selectionChange)और सुझाव (onSelectionChange)काम नहीं आया और मैं उपयोग नहीं कर रहा हूँ ReactiveForms। मैं इस (valueChange)घटना का उपयोग करके क्या कर रहा था :

<mat-select (valueChange)="someFunction()">

और यह मेरे लिए काम किया

Comments

मैं एक टेम्प्लेट फ़ॉर्म का उपयोग कर रहा हूं, और निम्न का उपयोग करके मेरे साथ काम कर रहा हूं: <mat-select placeholder="Select an option" [(ngModel)]="project.managerId" name="managerId" required (selectionChange)="fillComanager(project.managerId)"> <mat-option *ngFor="let manager of managers" [value]="manager.id"> {{ manager.name }} </mat-option> </mat-select>

— pcdro

Answer 5

मेरे पास आज यह मुद्दा चटाई-विकल्प-समूह के साथ है। जिस चीज ने मुझे समस्या हल की, वह मैट-सेलेक्ट किए गए अन्य इवेंट में उपयोग कर रही है: valueChange

समझने के लिए मैंने यहाँ एक छोटा सा कोड रखा है:

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)"> <!-- (valueChange)="doSomething1(choosedValue.value)" instead of (change) or other event-->

    <mat-option >-- None --</mat-option>
      <mat-optgroup  *ngFor="let group of filterData" [label]="group.viewValue"
                    style = "background-color: #0c5460">
        <mat-option *ngFor="let option of group.options" [value]="option.value">
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
  </mat-select>
</mat-form-field>

चटाई संस्करण:

"@ कोणीय / सामग्री": "^ 6.4.7",