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




typescript angular-material2 (7)

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

value="{{ option.id }}"

হতে হবে

[value]="option.id"

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

<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>

২.০.০-বিটা ১.২ সংস্করণ অনুসারে পার্শ্ব নোটে উপাদান নির্বাচন করুন এখন একটি 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>

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

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

  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>

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

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


আপনার নীচের মত mat-option এটি [value] হিসাবে আবদ্ধ করা উচিত,

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

জীবন্ত উদাহরণ


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

<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


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

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

আমি মাদুর-নির্বাচন সহ কৌনিক 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>

ইতিমধ্যে প্রতিক্রিয়াশীল ফর্মগুলিতে এনজিএমোডেল ব্যবহার করে কৌণিক 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;
}

উপরের ngOnInit এ এই.ফিল্টার.সেটভ্যালু (এটি নির্বাচিত) নোট করুন।

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


compareWith ব্যবহার করুন, নির্বাচিত মানগুলির সাথে বিকল্পের মানগুলি তুলনা করতে একটি ফাংশন ব্যবহার করুন। এখানে দেখুন: https://material.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;
}




angular-material2