typescript - مطاطية - كيفية عمل قائمة منسدلة مفلترة




الزاوي 2-تحديد القيمة المحددة في القائمة المنسدلة (4)

واجهت مشكلة في تحديد القيم مسبقًا في قائمة منسدلة في Angular 2.

قمت بتعيين مجموعة من الألوان في المكون الذي أربطه بنجاح بالقائمة المنسدلة. المشكلة التي أواجهها هي الاختيار المسبق لقيمة في الصفحة init.

يجب أن يحدد السطر [selected]="car.color.id == x.id" القيمة التي تم تعيينها على طراز السيارة this.car.color = new Colour(-1,''); ومع ذلك ، يعمل هذا فقط عندما أقوم بتعيين معرف لون السيارة على العنصر الأخير في القائمة (في هذه الحالة أسود) this.car.color = new Colour(4,'');

أستخدم أحدث إصدار من Angular (rc3) ولقد واجهت نفس المشكلات في rc1 و rc2.

هنا هو الغطاس تظهر هذه القضية.

https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

جانب غريب آخر هو أنه عند النظر إلى بيانات التعريف ، فإن Angular قد عيّن القيمة المحددة إلى true.

لكن القائمة المنسدلة لا تزال فارغة.

يبدو أن مشكلة منفصلة من هذه الأسئلة ذات الصلة.

الزاوي 2 مجموعة تبدأ قيمة تحديد

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

كيفية استخدام select / option / NgFor على مجموعة من الكائنات في Angular2

مع تحياتي

ستيف

قالب المكون

   <div>
        <label>Colour</label>
        <div>
            <select [(ngModel)]="car.colour"">
                <option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option>
            </select>
        </div>
    </div>

مكون

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car = new Car();
    colours = Array<Colour>();

    ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));
        this.colours.push(new Colour(3, 'Orange'));
        this.colours.push(new Colour(4, 'Black'));

        this.car = new Car();
        this.car.color = new Colour(-1,'');        
    }
}

export class Car
{
    color:Colour;
}

export class Colour
{
    constructor(id:number, name:string) {
        this.id=id;
        this.name=name;
    }

    id:number;
    name:string;
}

هذا المثال الحل هو شكل رد الفعل

 <select formControlName="preferredBankAccountId" class="form-control">
                <option *ngFor="let item of societyAccountDtos" [value]="item.societyAccountId" >
                  {{item.nickName}}
                </option>
              </select>

في المكون:

this.formGroup.patchValue({
        preferredBankAccountId:  object_id_to_be_pre_selected
      });

يمكنك أيضًا إعطاء هذه القيمة حيث يمكنك تهيئة formGroup أو إصدار أحدث ، وفقًا لمتطلباتك.

يمكنك القيام بذلك عن طريق استخدام ربط [(ngModel)] أيضًا حيث لا يلزمك تهيئة formControl.

مثال مع [(ngModel)] الربط

 <select [(ngModel)]="matchedCity" formControlName="city" class="form-control input-sm">
                  <option *ngFor="let city of cities" [ngValue]="city">{{city.cityName}}</option>
                </select>

هنا ، MatchedCity هي واحدة من الأشياء داخل المدن.


الزاوي 2 بسيطة المنسدلة القيمة المحددة

قد يساعد شخص ما كما أحتاج لإظهار القيمة المحددة فقط ، ولا تحتاج إلى إعلان شيء ما في المكون وما إلى ذلك.

إذا كانت حالتك تأتي من قاعدة البيانات ، فيمكنك إظهار القيمة المحددة بهذه الطريقة.

<div class="form-group">
    <label for="status">Status</label>
    <select class="form-control" name="status" [(ngModel)]="category.status">
       <option [value]="1" [selected]="category.status ==1">Active</option>
       <option [value]="0" [selected]="category.status ==0">In Active</option>
    </select>
</div>

شكرا للنصيحة غونتر ، جعلني أتحرك في الاتجاه الصحيح. كان هناك خطأ إملائي متطابق في "اللون" في الحل الذي تسبب في حدوث مشكلات وكنت بحاجة لاستخدام "ngValue" وليس "قيمة" في القالب html.

إليك الحل الكامل باستخدام كائنات ngModel وحدد خيارات القائمة وتجنب استخدام السمة [المحددة].

لقد قمت بتحديث الغطاس لإظهار حل العمل الكامل. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

قالب المكون

 <div>
        <label>Colour</label>
        <div *ngIf="car != null">
            <select [(ngModel)]="car.colour">
                <option *ngFor="let x of colours" [ngValue]="x" >{{x.name}}</option>
            </select>
        </div>
    </div>

مكون

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car;
    colours: Array<Colour>;

    ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.push(new Colour(-1, 'Please select'));
        this.colours.push(new Colour(1, 'Green'));
        this.colours.push(new Colour(2, 'Pink'));

        this.car = new Car();
        this.car.colour = this.colours[1];        
    }
}

export class Car  
{
    colour:Colour;
}

export class Colour
{
    constructor(id:number, name:string) {
        this.id=id;
        this.name=name;
    }

    id:number;
    name:string;
}

عادة ما يعمل ضبط car.colour على القيمة التي تريد car.colour مبدئيًا.

عند تعيين car.colour ، يمكنك إزالة [selected]="car.color.id == x.id" .

إذا لم تكن القيمة عبارة عن سلسلة [ngValue]="..." فيجب استخدامها. [value]="..." تدعم السلاسل فقط.





angular2-forms