मैट रेडियो बटन कैसे सेट करें जब हम प्राथमिक संपर्क विवरण बनाते हैं तो इसे दिखाया जाता है (छवि 1) image1

दिखाया गया है (छवि 2) जब हमें सेव बटन पर क्लिक करने पर विवरण मिलता है

image2

फिर मैट टेबल पर दिखाया गया है (छवि 3) मैं छवि दिखाए जाने से पहले प्राथमिक सत्य प्राप्त करने पर केवल एक रेडियो बटन का चयन करना चाहता हूं

image3

मैट टेबल पर मैट रेडियो बटन के लिए एक कोड है

<ng-container matColumnDef="primary" sticky>
                <th mat-header-cell *matHeaderCellDef>Primary </th>
                <td mat-cell *matCellDef="let element;">
                  <mat-radio-group> 
                    <mat-radio-button></mat-radio-button>
                  </mat-radio-group>
                </td>
              </ng-container>
0
keshav godani 31 मार्च 2020, 14:45

1 उत्तर

सबसे बढ़िया उत्तर

चयनित रेडियो बटन प्राप्त करने के लिए प्रत्येक रेडियो बटन पर क्लिक करें। रेडियो बटन के कॉलम में केवल एक चेक इन करने के लिए जांचें कि वर्तमान तत्व की आईडी चयनित आईडी के बराबर है या नहीं [checked]="primaryContact.id == element.id"

अपने रेडियो बटन टेम्प्लेट को नीचे दिए गए टेम्प्लेट में संशोधित करें

<ng-container matColumnDef="primary" >
            <th mat-header-cell *matHeaderCellDef>Primary </th>
            <td mat-cell *matCellDef="let element;">
                <mat-radio-button (click)="primaryClick(element)"
               [checked]="primaryContact.id == element.id" ></mat-radio-button>
            </td>
   </ng-container>

और ts में वर्तमान संपर्क को होल्ड करने के लिए इंस्टेंस वेरिएबल बनाएं जिसे प्राथमिक के रूप में चुना गया है। त्रुटियों से बचने के लिए इसके मान को डेटा की पहली पंक्ति पर सेट करें।

 primaryContact={primary:false,name:'snfjn',mobile:328754,email:'@fndn',...your fields};

और अब प्राथमिक संपर्क को चयनित रेडियोधटन के तत्व पर सेट करने के लिए हैंडलर फ़ंक्शन

  primaryClick(element){
        this.primaryContact=element;
        console.log(this.primaryContact.name)
      }

स्टैकब्लिट्ज : https://stackblitz.com/edit/material-table-demo-wjpqsy< /ए>

1
M A Salman 31 मार्च 2020, 15:32