span html شرح




ربط عنصر تحديد للكائن في الزاوي (8)

أرغب في ربط عنصر تحديد بقائمة كائنات - وهو أمر سهل بما فيه الكفاية:

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`
})
export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null;
}

في هذه الحالة ، يبدو أن القيمة المحددة ستكون رقمًا - معرف العنصر المحدد.

ومع ذلك ، أود في الواقع ربط كائن البلد نفسه بحيث تكون القيمة المحددة هي الكائن بدلاً من المعرف فقط. حاولت تغيير قيمة الخيار مثل:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

ولكن هذا لا يبدو للعمل. يبدو أنه يضع كائنًا في القيمة المحددة الخاصة بي - ولكن ليس الكائن الذي أتوقعه. يمكنك أن ترى هذا في بلدي المثال الغطاس .

حاولت أيضًا الربط بحدث التغيير حتى أتمكن من تعيين الكائن بنفسي استنادًا إلى المعرف المحدد ؛ ومع ذلك ، يبدو أن حدث التغيير وقع قبل تحديث ngModel المنضم - وهذا يعني أنني لا أستطيع الوصول إلى القيمة المحددة حديثًا في تلك المرحلة.

هل هناك طريقة نظيفة لربط عنصر تحديد بكائن ذي Angular 2؟


أيضًا ، إذا لم ينجح أي شيء آخر من الحلول المقدمة ، تحقق مما إذا كنت قد قمت باستيراد "FormsModule" داخل "AppModule" ، وكان ذلك مفتاحًا بالنسبة لي.


إنشاء getter آخر للعنصر المحدد

<form [formGroup]="countryForm">
  <select formControlName="country">
    <option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
  </select>

  <p>Selected Country: {{selectedCountry?.name}}</p>
</form>

في نهاية الخبر:

get selectedCountry(){
  let countryId = this.countryForm.controls.country.value;
  let selected = this.countries.find(c=> c.id == countryId);
  return selected;
}

بالنسبة لي يعمل مثل هذا ، يمكنك التحكم في event.target.value .

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

عملت معي:

قالب HTML:

أضفت (ngModelChange)="selectChange($event)" select بلدي.

<div>
  <label for="myListOptions">My List Options</label>
  <select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">{{oneOption.name}}</option>
  </select>
</div>

على المكون.

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

تحتاج إلى إضافة إلى component.ts هذه الوظيفة:

  selectChange( $event) {
    //In my case $event come with a id value
    this.model.myListOptions = this.listOptions[$event];
  }

ملاحظة: أحاول باستخدام [select]="oneOption.id==model.myListOptions.id" ولا أعمل.

============= يمكن أن تكون الطرق الأخرى: =========

قالب HTML:

أضفت [compareWith]="compareByOptionId select بلدي.

<div>
  <label for="myListOptions">My List Options</label>
  <select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
    <option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">{{oneOption.name}}</option>
  </select>
</div>

على المكون.

  listOptions = [
    { id: 0, name: "Perfect" },
    { id: 1, name: "Low" },
    { id: 2, name: "Minor" },
    { id: 3, name: "High" },
  ];

تحتاج إلى إضافة إلى component.ts هذه الوظيفة:

 /* Return true or false if it is the selected */
 compareByOptionId(idFist, idSecond) {
    return idFist && idSecond && idFist.id == idSecond.id;
 }

هذا يمكن أن يساعد:

<select [(ngModel)]="selectedValue">
      <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>


يمكنك اختيار معرف باستخدام وظيفة

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

يمكنك القيام بذلك أيضًا دون الحاجة إلى استخدام [(ngModel)] في علامة <select> الخاصة بك

قم بتعريف متغير في ملف ts الخاص بك

toStr = JSON.stringify;

وفيك قالب تفعل هذا

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

ثم استخدم

let value=JSON.parse(event.target.value)

لتحليل السلسلة مرة أخرى إلى كائن JavaScript صالح


<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

سبيل المثال StackBlitz

ملاحظة: يمكنك استخدام [ngValue]="c" بدلاً من [ngValue]="c.id" حيث c هو كائن البلد الكامل.

[value]="..." تدعم قيم السلسلة فقط
[ngValue]="..." يدعم أي نوع

تحديث

إذا كانت value عبارة عن كائن ، فإن المثيل المحدد مسبقًا يجب أن يكون متطابقًا مع إحدى القيم.

راجع أيضًا المقارنة المخصصة المضافة حديثًا https://github.com/angular/angular/issues/13268 المتاحة منذ الإصدار 4.0.0-beta.7

<select [compareWith]="compareFn" ...

انتبه إذا كنت ترغب في الوصول إلى this داخل compareFn .

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}






angular