typescript - Angular 2 - Açılır listede seçili değeri ayarlama

Angular 2'de bir açılır listedeki değerleri önceden seçme konusunda bir sorunla karşılaştım.

Bileşende bir dizi renk belirledim ve bunu başarıyla açılır listeye bağladım. Yaşadığım sorun, sayfa başlatıldığında bir değeri önceden seçmekle ilgili.

[selected]="car.color.id == x.id" satırı, araba modelinde ayarlanmış olan değeri seçiyor olmalı this.car.color=new Colour(-1,'');, ancak bu yalnızca araba renk kimliğini listedeki son öğeye ayarladığımda çalışıyor (bu durumda siyah) this.car.color=new Colour(4,'');

En son Angular sürümünü (rc3) kullanıyorum ve rc1 ile rc2'de de aynı sorunları yaşadım.

İşte sorunu gösteren bir plunker.

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

Bir diğer garip yön, meta verilere bakıldığında Angular'ın seçili değeri true olarak ayarlamış olmasıdır.

Ama açılır menü hâlâ boş görünüyor.

Bunlarla ilgili sorulardan ayrı bir konu gibi görünüyor.

Angular 2 Select'in başlangıç değerini ayarla

Angular 2'de select öğesini nesneye bağlamak

Angular2'de bir nesne dizisi üzerinde select/option/NgFor nasıl kullanılır

Saygılarımla

Steve

Bileşen şablonu

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

Bileşen

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

Cevap #1

Başlangıçta seçili olmasını istediğiniz değere car.colour değerini ayarlamak genellikle işe yarar.

car.colour ayarlandığında, [selected]="car.color.id == x.id" öğesini kaldırabilirsiniz.

Eğer değer bir string değilse [ngValue]="..." kullanılmalıdır. [value]="..." sadece stringleri destekler.

Cevap #2

Angular 2 basit açılır menü seçilen değer

Sadece seçilen değeri göstermem gerektiği için birine yardımcı olabilir, komponentte bir şey tanımlamaya gerek yok vb.

Durumunuz veritabanından geliyorsa, seçili değeri bu şekilde gösterebilirsiniz.

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

Cevap #3

İpucu için teşekkürler Günter, beni doğru yönde hareket ettirdi. Çözümümde 'color' kelimesinin yanlış yazılması sorunlara neden oluyordu ve şablon html'de 'value' yerine 'ngValue' kullanmam gerekiyordu.

İşte ngModel ve seçim listesi seçenekleri için nesneleri kullanarak ve [selected] özniteliğini kullanmaktan kaçınarak tam çözüm.

Tam çalışır çözümü göstermek için Plunker'ı güncelledim. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Bileşen şablonu

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

Bileşen

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

Cevap #4

Bu örnek çözüm reaktif form içindir

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

Bileşende:

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

Bu değeri formGroup'unuzu başlatırken veya daha sonra, ihtiyacınıza bağlı olarak, verebilirsiniz.

Bunu, formControl'ünüzü başlatmanız gerekmediği durumlarda da [(ngModel)] bağlamasını kullanarak yapabilirsiniz.

[(ngModel)] bağlaması ile örnek

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

Burada, matchedCity, cities içindeki nesnelerden biridir.

İlgili makaleler