web-dev-qa-db-ja.com

Angular 2 - ドロップダウンリストで選択した値を設定する

Angular 2のドロップダウンリストで値を事前選択する際に問題が発生しました。

ドロップダウンリストに正常にバインドしたコンポーネントに色の配列を設定します。私が経験している問題はpage initで値をあらかじめ選択することにあります。

[selected]="car.color.id == x.id"行は車種this.car.color = new Colour(-1,'');に設定されている値を選択しているはずですが、これはリストの最後の項目に車の色IDを設定した場合にのみ機能します（この場合は黒）this.car.color = new Colour(4,'');

最新バージョンのAngular（rc3）を使用していますが、rc1とrc2で同じ問題が発生しています。

これは問題を示す略奪者です。

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

もう1つの奇妙な点は、メタデータAngularを見ると、選択値がtrueに設定されていることです。

enter image description here

しかし、ドロップダウンはまだ空のように見えます。

enter image description here

これらの関連する質問とは別の問題と思われます。

Angular 2 selectの開始値を設定する

Angular 2のオブジェクトへのselect要素のバインド

Angular 2のオブジェクトの配列に対するselect/option/NgForの使い方

よろしく

スティーブ

コンポーネントテンプレート

   <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;
}
typescriptangularangular2-forms
50
CountZero

car.colourを最初に選択したい値に設定すると通常はうまくいきます。

car.colourが設定されているときは、[selected]="car.color.id == x.id"を削除できます。

値が文字列でない場合は[ngValue]="..."を使用しなければなりません。 [value]="..."は文字列のみをサポートします。

48
Günter Zöchbauer

先端Günterをありがとう、それは私が正しい方向に動いたようにしました。問題の原因となっていた私のソリューションでは 'color'のスペルが間違っていたので、テンプレートのhtmlでは 'value'ではなく 'ngValue'を使用する必要がありました。

これがngModelとselectリストオプションのオブジェクトを使用し、[selected]属性の使用を回避する完全な解決策です。

Plunkerを更新して、完全な実用的な解決策を示しました。 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;
}
12
CountZero

角度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>
12
Muhammad Shahzad

この例の解決策は反応型用です

 <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を初期化した場所、またはそれ以降にこの値を指定することもできます。

FormControlを初期化する必要がない場合にも、[（ngModel）]バインディングを使用してこれを実行できます。

[（ngModel）]バインディングを使った例

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

ここで、matchedCityは都市内のオブジェクトの1つです。

5
Nabin Kumar Khatiwada

これは私のために働きます。

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

これが有効かどうかわからない、間違っている場合は修正してください。
これがこのようになってはいけない場合は訂正してください。

1
Dharam Mali