इसलिए मुझे ड्रॉपडाउन में विकल्पों की एक सूची प्रदर्शित करने के साथ-साथ प्रत्येक विकल्प के अलावा एक "x" प्रदर्शित करने की आवश्यकता है, जिस पर क्लिक करने पर विकल्प को सूची से हटा दिया जाना चाहिए। मैंने यह कार्यक्षमता हासिल कर ली है

<mat-select "some css class"> <mat-option *ngFor="let singleitem of mylist"> <span "some css classes for right align" (click)="deletetheitemmethod($event,opt)">x</span> </mat-option> </mat-select>

यह ठीक काम करता है, हालांकि जब उपयोगकर्ता कोई विकल्प चुनता है, तो चटाई-चयन एक चयनित मान को प्रदर्शित करता है:

"singleitemx"

कि x अंत में अवांछनीय है। चयनित मान केवल के रूप में प्रदर्शित किया जाना चाहिए

"एक चीज"

क्या कोई ऐसा परिदृश्य में आया है। क्या आप कृपया मुझे बता सकते हैं कि इसे कैसे हल किया जाए।

-2
rashid khan 1 अप्रैल 2020, 13:06

1 उत्तर

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

"चटाई-चयन-ट्रिगर" जोड़ने से यह ठीक हो जाएगा:

<mat-select-trigger>
  {{selected}}
</mat-select-trigger>

दिए गए समाधान में सुधार करने के लिए:

<mat-form-field>
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-select-trigger>
      {{selected}}
    </mat-select-trigger>
    <mat-option
      *ngFor="let singleitem of options" 
      [value]="singleitem">
      {{singleitem}}
      <span (click)="deletetheitemmethod($event,opt)">x</span>
    </mat-option>
  </mat-select>
</mat-form-field>

विकी: https://material.angular.io/components/select/api

संबंधित: कोणीय सामग्री - MatSelect में MatIcon

1
Schrader 1 अप्रैल 2020, 14:18