কৌণিক উপাদান: মাদুর-নির্বাচন ডিফল্ট নির্বাচন না করা

Question 1

আমার একটি মাদুর-নির্বাচন আছে যেখানে বিকল্পগুলি অ্যারেতে সংজ্ঞায়িত সমস্ত অবজেক্ট। আমি বিকল্পগুলির মধ্যে একটিতে ডিফল্ট হিসাবে মান সেট করার চেষ্টা করছি, তবে পৃষ্ঠাটি যখন রেন্ডার হয় তখন এটি নির্বাচন করা ছেড়ে যায়।

আমার টাইপ স্ক্রিপ্ট ফাইল রয়েছে:

  public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

আমার এইচটিএমএল ফাইলটিতে রয়েছে:

  <div>
    <mat-select
        [(value)]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

আমি সেটিং চেষ্টা করেছি selected2এবং valueএ mat-optionউভয় বস্তু এবং এটা আইডি, এবং উভয় ব্যবহার চেষ্টা করেছি [(value)]এবং [(ngModel)]এ mat-select, কিন্তু কোনোটাই কাজ করছে।

আমি উপাদান সংস্করণ 2.0.0-beta.10 ব্যবহার করছি

Question 2

আপনার টেম্পলেটটিতে মানটির জন্য একটি বাঁধাই ব্যবহার করুন।

value="{{ option.id }}"

হতে হবে

[value]="option.id"

এবং আপনার নির্বাচিত মান ব্যবহার ngModelপরিবর্তেvalue ।

<mat-select [(value)]="selected2">

হতে হবে

<mat-select [(ngModel)]="selected2">

সম্পূর্ণ কোড:

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

হিসাবে একটি পার্শ্ব নোট অন সংস্করণ 2.0.0-beta.12 উপাদান নির্বাচন এখন একটি গ্রহণ mat-form-fieldতাই এটি অন্যান্য পদার্থ ইনপুট নিয়ন্ত্রণ সঙ্গে সামঞ্জস্যপূর্ণ পিতা বা মাতা উপাদান হিসেবে উপাদান। আপনি আপগ্রেড করার পরে divউপাদানটির সাথে mat-form-fieldউপাদানটি প্রতিস্থাপন করুন ।

<mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

Question 3

ব্যবহার করুন compareWith, নির্বাচিত মানগুলির সাথে বিকল্পের মানগুলির তুলনা করার জন্য একটি ফাংশন। এখানে দেখুন: https://matory.angular.io/components/select/api#MatSelect

নিম্নলিখিত কাঠামোর একটি অবজেক্টের জন্য:

listOfObjs = [{ name: 'john', id: '1'}, { name: 'jimmy', id: '2'},...]

এর মতো মার্কআপ সংজ্ঞায়িত করুন:

<mat-form-field>
  <mat-select
    [compareWith]="compareObjects"
    [(ngModel)]="obj">
       <mat-option  *ngFor="let obj of listOfObjs" [value]="obj">
          {{ obj.name }}
       </mat-option>
    </mat-select>
</mat-form-field>

এবং এর তুলনা ফাংশনটি সংজ্ঞায়িত করুন:

compareObjects(o1: any, o2: any): boolean {
  return o1.name === o2.name && o1.id === o2.id;
}

Question 4

আমি মাদুর-নির্বাচন সহ কৌনিক 5 এবং প্রতিক্রিয়াশীল ফর্মগুলি ব্যবহার করছি এবং প্রাথমিক মানটি দেখানোর জন্য উপরের সমাধানগুলির কোনওটিই পাই না।

মাদুর-নির্বাচন উপাদানগুলির মধ্যে বিভিন্ন ধরণের ব্যবহৃত হচ্ছে তা মোকাবেলায় আমাকে [তুলনা করার সাথে] যুক্ত করতে হয়েছিল। অভ্যন্তরীণভাবে, এটি প্রদর্শিত হচ্ছে মাদুর-নির্বাচন নির্বাচিত মান ধরে রাখতে একটি অ্যারে ব্যবহার করে। যদি সেই মোডটি চালু থাকে তবে এটি একই কোডটিকে একাধিক নির্বাচনের সাথে কাজ করার মঞ্জুরি দেয়।

কৌনিক নির্বাচন নিয়ন্ত্রণ ডক

এখানে আমার সমাধান:

ফর্ম নিয়ন্ত্রণ শুরু করতে ফর্ম নির্মাতা:

this.formGroup = this.fb.group({
    country: new FormControl([ this.myRecord.country.id ] ),
    ...
});

তারপরে আপনার উপাদানগুলির সাথে তুলনা করুন ফাংশনটি প্রয়োগ করুন:

compareIds(id1: any, id2: any): boolean {
    const a1 = determineId(id1);
    const a2 = determineId(id2);
    return a1 === a2;
}

এরপরে নির্ধারিত আইডি ফাংশনটি তৈরি এবং রফতানি করুন (আমাকে স্ট্যান্ডলোন ফাংশন তৈরি করতে হয়েছিল যাতে মাদুর-নির্বাচন এটি ব্যবহার করতে পারে):

export function determineId(id: any): string {
    if (id.constructor.name === 'array' && id.length > 0) {
       return '' + id[0];
    }
    return '' + id;
}

অবশেষে আপনার মাদুর-নির্বাচনের তুলনায় তুলনা যুক্ত করুন:

<mat-form-field hintLabel="select one">
<mat-select placeholder="Country" formControlName="country" 
    [compareWith]="compareIds">

    <mat-option>None</mat-option>
    <mat-option *ngFor="let country of countries" [value]="country.id">
                        {{ country.name }}
    </mat-option>
</mat-select>
</mat-form-field>

Question 5

আপনি যেমন বাঁধাই করা উচিত [value]মধ্যে mat-optionনীচে,

<mat-select placeholder="Panel color" [(value)]="selected2">
  <mat-option *ngFor="let option of options2" [value]="option.id">
    {{ option.name }}
  </mat-option>
</mat-select>

সরাসরি নমুনা

Question 6

আপনি কেবল নিজের তুলনা ফাংশনটি কার্যকর করতে পারেন

[compareWith]="compareItems"

পাশাপাশি দেখুন ডকু । সুতরাং সম্পূর্ণ কোডটি দেখতে পাবেন:

  <div>
    <mat-select
        [(value)]="selected2" [compareWith]="compareItems">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

এবং টাইপস্ক্রিপ্ট ফাইলটিতে:

  compareItems(i1, i2) {
    return i1 && i2 && i1.id===i2.id;
  }

Question 7

ইতিমধ্যে প্রতিক্রিয়াশীল ফর্মগুলিতে এনজিএমোডেল ব্যবহার করে কৌণিক 6 এ যেমন উল্লেখ করা হয়েছে তা হ্রাস করা হয়েছে (এবং কৌনিক 7 তে সরানো হয়েছে), সুতরাং আমি টেমপ্লেট এবং উপাদানটি নিম্নলিখিত হিসাবে পরিবর্তন করেছি।

টেমপ্লেট:

<mat-form-field>
    <mat-select [formControl]="filter" multiple 
                [compareWith]="compareFn">
        <mat-option *ngFor="let v of values" [value]="v">{{v.label}}</mat-option>
    </mat-select>
</mat-form-field>

উপাদানটির প্রধান অংশগুলি ( onChangesএবং অন্যান্য বিবরণ বাদ দেওয়া হয়েছে):

interface SelectItem {
    label: string;
    value: any;
}

export class FilterComponent implements OnInit {
    filter = new FormControl();

    @Input
    selected: SelectItem[] = [];

    @Input()
    values: SelectItem[] = [];

    constructor() { }

    ngOnInit() {
        this.filter.setValue(this.selected);
    }

    compareFn(v1: SelectItem, v2: SelectItem): boolean {
        return compareFn(v1, v2);
    }
}

function compareFn(v1: SelectItem, v2: SelectItem): boolean {
    return v1 && v2 ? v1.value === v2.value : v1 === v2;
}

উল্লেখ্য this.filter.setValue (this.selected) মধ্যে ngOnInitউপরে।

এটি অ্যাঙ্গুলার 6 এ কাজ করছে বলে মনে হচ্ছে।

Question 8

আমি এই উদাহরণগুলির মত এটি করেছি। মাদুর-নির্বাচনের মানকে মাদুর-বিকল্পগুলির মধ্যে একটির মান নির্ধারণ করার চেষ্টা করা হয়েছিল। কিন্তু ব্যর্থ।

আমার ভুলটি ছিল [[(মান)] = "কিছুসংখ্যার পরিবর্তনশীল" একটি সংখ্যার ধরণের ভেরিয়েবলের সাথে যখন মাদুর-বিকল্পগুলির মধ্যে স্ট্রিং ছিল। এমনকি যদি তারা টেমপ্লেটে একই দেখায় তবে এটি সেই বিকল্পটি নির্বাচন করবে না।

একবার আমি কিছুসংখ্যক পরিবর্তনশীলকে একটি স্ট্রিংতে পার্স করলে সমস্ত কিছু ঠিক হয়ে যায়।

সুতরাং মনে হচ্ছে আপনার মাদুর-নির্বাচন হওয়া উচিত এবং মাদুর-বিকল্পের মানগুলি কেবল একই সংখ্যা নয় (যদি আপনি সংখ্যা উপস্থাপন করছেন) তবে সেগুলি স্ট্রিংয়ের মতো হতে দিন।

Question 9

আমার জন্য সমাধানটি ছিল:

<mat-form-field>
  <mat-select #monedaSelect  formControlName="monedaDebito" [attr.disabled]="isLoading" [placeholder]="monedaLabel | async ">
  <mat-option *ngFor="let moneda of monedasList" [value]="moneda.id">{{moneda.detalle}}</mat-option>
</mat-select>

টিএস:

@ViewChild('monedaSelect') public monedaSelect: MatSelect;
this.genericService.getOpciones().subscribe(res => {

  this.monedasList = res;
  this.monedaSelect._onChange(res[0].id);


});

অবজেক্ট ব্যবহার করে: {আইডি: সংখ্যা, ডিটেল: স্ট্রিং Using

Question 10

এটা চেষ্টা কর!

this.selectedObjectList = [{id:1}, {id:2}, {id:3}]
this.allObjectList = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
let newList = this.allObjectList.filter(e => this.selectedObjectList.find(a => e.id == a.id))
this.selectedObjectList = newList

Question 11

আমার সমাধানটি সামান্য কৌশল এবং সহজ।

<div>
    <mat-select
        [placeholder]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

আমি কেবল স্থানধারকটি ব্যবহার করেছি । উপাদান স্থানধারকের ডিফল্ট রঙ light gray। বিকল্পটি নির্বাচনের মতো দেখতে এটি তৈরি করতে, আমি কেবল সিএসএসকে নিম্নরূপভাবে হেরফের করেছি:

::ng-deep .mat-select-placeholder {
    color: black;
}

Question 12

বাঁধাই বা ডিফল্ট মান নির্ধারণের কাজ করে শুধুমাত্র যদি মান উপর অ্যাট্রিবিউট MatSelect সাথে তুলনা করা যায় মান অ্যাট্রিবিউট করতে যুক্ত করে MatOption । আপনি বাঁধে তাহলে captionআপনার আইটেমের মূল্য এর অ্যাট্রিবিউট মাদুর-বিকল্প উপাদান আপনি ডিফল্ট উপাদান সেট করতে হবে মাদুর নির্বাচন করতে captionখুব আপনার আইটেমের। আপনি যদি Idআপনার আইটেমটিকে মাদুর-বিকল্পের সাথে আবদ্ধ করেন, আপনাকে অবশ্যই মাদুর-নির্বাচনের সাথে আবদ্ধ idকরতে হবে, পুরো আইটেম, ক্যাপশন বা অন্য কোনও নয়, কেবল একই ক্ষেত্র।

তবে আপনার এটি আবদ্ধ করে করা উচিত []

Question 13

আমি উপরেরটিকে খুব সাবধানে অনুসরণ করেছি এবং এখনও প্রাথমিক মানটি নির্বাচিত করতে পারি নি।

কারণটি ছিল যে যদিও আমার সীমাবদ্ধ মানটি টাইপস্ক্রিপ্টের স্ট্রিং হিসাবে সংজ্ঞায়িত করা হয়েছে, আমার ব্যাকএন্ড এপিআই একটি নম্বর ফিরিয়ে দিচ্ছে।

জাভাস্ক্রিপ্ট আলগা টাইপিং সহজভাবে রানটাইম (ত্রুটি ব্যতীত) টাইপ পরিবর্তন করেছে, যা প্রাথমিক মান নির্বাচন বাধা দেয়।

উপাদান

myBoundValue: string;

টেমপ্লেট

<mat-select [(ngModel)]="myBoundValue">

সমাধানটি ছিল স্ট্রিংয়ের মান ফেরত দেওয়ার জন্য API আপডেট করা update

Question 14

এটি অর্জনের একটি খুব সহজ উপায় উদাহরণস্বরূপ formControlএকটি FormGroup(alচ্ছিক) এর অভ্যন্তরে একটি ডিফল্ট মান সহ একটি ব্যবহার করা । অঞ্চল ইনপুটটিতে ইউনিট নির্বাচক ব্যবহার করে এটি উদাহরণ:

ts

H_AREA_UNIT = 1;
M_AREA_UNIT = 2;

exampleForm: FormGroup;

this.exampleForm = this.formBuilder.group({
  areaUnit: [this.H_AREA_UNIT],
});

এইচটিএমএল

<form [formGroup]="exampleForm">
 <mat-form-field>
   <mat-label>Unit</mat-label>
   <mat-select formControlName="areaUnit">
     <mat-option [value]="H_AREA_UNIT">h</mat-option>
     <mat-option [value]="M_AREA_UNIT">m</mat-option>
   </mat-select>
 </mat-form-field>
</form>

Question 15

একটি সংখ্যা এবং একটি স্ট্রিংয়ের মধ্যে একটি তুলনা মিথ্যা হতে পারে , সুতরাং, আপনি নির্বাচিত মানটিকে এনজিওইনাইটের মধ্যে একটি স্ট্রিংয়ের জন্য নির্বাচিত করুন এবং এটি কার্যকর হবে।

আমার একই সমস্যা ছিল, আমি ব্যবহার করে এনাম দিয়ে মাদুর-নির্বাচন পূরণ করেছি

Object.keys(MyAwesomeEnum).filter(k => !isNaN(Number(k)));

এবং আমি যে এনাম মানটি নির্বাচন করতে চেয়েছিলাম তা পেয়েছিলাম ...

এটি কেন কাজ করছে না তা সনাক্ত করার চেষ্টা করার জন্য আমি কয়েক ঘন্টা আমার মনকে সংগ্রাম করে কাটিয়েছি। এবং আমি মাদুর-নির্বাচন, কী সংগ্রহ এবং নির্বাচিত সমস্ত ভেরিয়েবলগুলি রেন্ডার করার পরে তা করেছি ... যদি আপনার ["0", "1", "2"] থাকে এবং আপনি 1 টি নির্বাচন করতে চান ( যা একটি সংখ্যা) 1 == "1" মিথ্যা এবং এর কারণে কিছুই নির্বাচন করা হয়নি।

সুতরাং, সমাধানটি হল আপনাকে নির্বাচিত মানটি এনজিওইনাইটের মধ্যে একটি স্ট্রিংয়ের জন্য ফেলে দেওয়া এবং এটি কার্যকর হবে।

Question 16

আমি এটা করেছি.

<div>
    <mat-select [(ngModel)]="selected">
        <mat-option *ngFor="let option of options" 
            [value]="option.id === selected.id ? selected : option">
            {{ option.name }}
        </mat-option>
    </mat-select>
</div>

সাধারণত আপনি কিছু করতে পারেন [value]="option", যদি না আপনি কিছু ডাটাবেস থেকে আপনার অপশনগুলি পেয়ে থাকেন ?? আমি মনে করি হয় ডেটা পেতে দেরি হওয়ায় এটি কাজ না করে, বা অর্জিত জিনিসগুলি কোনওরকমভাবে আলাদা হলেও সেগুলি একই রকম ?? অদ্ভুতভাবে যথেষ্ট যে এটি সম্ভবত পরবর্তীকালের, যেমনটি আমি চেষ্টা করেছি [value]="option === selected ? selected : option"এবং এটি কার্যকর হয়নি।

Question 17

টিএস

   optionsFG: FormGroup;
   this.optionsFG = this.fb.group({
       optionValue: [null, Validators.required]
   });

   this.optionsFG.get('optionValue').setValue(option[0]); //option is the arrayName

এইচটিএমএল

   <div class="text-right" [formGroup]="optionsFG">
     <mat-form-field>
         <mat-select placeholder="Category" formControlName="optionValue">
           <mat-option *ngFor="let option of options;let i =index" [value]="option">
            {{option.Value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
  </div>

Question 18

public options2 = [
  {"id": 1, "name": "a"},
  {"id": 2, "name": "b"}
]
 
YourFormGroup = FormGroup; 
mode: 'create' | 'update' = 'create';

constructor(@Inject(MAT_DIALOG_DATA) private defaults: defautValuesCpnt,
      private fb: FormBuilder,
      private cd: ChangeDetectorRef) {
}
  
ngOnInit() {

  if (this.defaults) {
    this.mode = 'update';
  } else {
    this.defaults = {} as Cpnt;
  }

  this.YourFormGroup.patchValue({
    ...
    fCtrlName: this.options2.find(x => x.name === this.defaults.name).id,
    ... 
  });

  this.YourFormGroup = this.fb.group({
    fCtrlName: [ , Validators.required]
  });

}

  <div>
    <mat-select formControlName="fCtrlName"> <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

স্নিপেট প্রসারিত করুন