Angular2反応性フォームモデルバインディング - マルチセレクトで更新が反映されない

Question

これまで設定していたかなり複雑なフォームがあります。私はここまで下がり、問題に遭遇しています。

ng-selectというマルチセレクションプラグインを使用しています。このディレクティブは、2つのデータ配列[items]と[active]を取ります。項目は可能なオプションのリストであり、アクティブなのはデフォルトで選択された値です。

私はこれを私の反応形式モデルで構成しようとしています。ここで

<span> 
    <ng-select formControlName="AttributeValue" [allowClear]="true" [multiple]="true" [items]="fetchSourceList()" [active]="formatValues(ruleAttributeData.AttributeValue)" placeholder="Click to Select a Value" class="inlineSelect"></ng-select> 
</span> 

は私のフォームは、これまでにどのように見えるかの画像です：

下部に見

arrayは、フォームを作成するときに、私のモデルが含まれているものです。それらは選択された値です。

active（デフォルト選択）を移入するために使用される方法は、次のようになります。

export interface ValueData { 
    RuleDetailID?: number; 
    AttrValue: string; 
    Value: string; 
    IsValueRetired: boolean; 
} 

private formatValues(data) { 
    return data.map((data: ValueData) => { 
     return { id: data.AttrValue, text: data.Value }; 
    }); 
} 

私fetchSourceList()方法はただから選択することが可能に項目の配列を返します。新しいオプションを選択するためにドロップダウンを呼び出すと、すでに選択されているオプションは表示されませんが、これは良いことです。

これまでのところ、ページが正常に読み込まれ、デフォルトの選択された項目がUIで選択済みとしてマークされ、formの値は8項目を示しています期待どおりに配列内にあります。私[items]="fetchSourceList()"が入力に追加していないオプションを選んで、まだ選択されていないthatsのデータのリストが含まれていますが、ここで

は問題が

...来ます。

使用可能なオプションから入力を選択すると、選択入力に追加が表示されません。フォームの値を取得すると、アイテムが選択されたアイテムの配列にキャッチで追加されたことがわかります。リストからオプションを選択し続けると、最後に選択したもの私の配列の8。

第2に、このマルチ選択からアイテムを削除すると、削除されません。

ここでは、モデルの問題の一部が予想通りに機能しないように見えます。

私は間違っていることを際立たせていますか？

Answer 1

docs（そのページのドキュメントのリンクを参照）を1として、ng-selectはそのInputプロパティとしてitemsまたはactiveを持っていないようです。オプションリストを指定するには、optionsプロパティを使用する必要があります。 activeの選択を選択するには、コンポーネント内のformControlのデフォルト値として設定します。

allowClearプロパティは、単一選択（マルチ選択ではない）にのみ使用されます。

また、あなたのオプションの配列要素は、ドキュメントごとに、このタイプに準拠している必要があり、

interface IOption { 
    value: string; 
    label: string; 
    disabled?: boolean; // this is optional 
} 

import { IOption } from 'ng-select'; 

は、あなたの例から、あなたのそれぞれを想定すると、としてあなたは、このインターフェイスをインポートすることができますoption要素は、{ id: "172", text: "Account Manager" }のような値で構成され、idが実際にはvalueであり、textが表示される場合はlabelとなります。 'オプション' は（それはオプション」であるとしてdisabledプロパティを省略）、このようなIOptionsインタフェースに適合するためのアレイ、

成分

import { IOption } from 'ng-select'; 

form: FormGroup; 
// choose the 'active' or default selections for the options dropdown 
// by including the corresponding 'value' property of IOptions list elements 
// returned from the getOptions() call. Use it as the formControl's initial value (array since it is multi-select) 
defaultSelections = ['172', '180', '113']; 

ngOnInit() { 
this.form = new FormGroup({ 
    AttributeValue: new FormControl(this.defaultSelections) 
}); 
} 

getOptions(data): Array<IOption> { 
    return data.map((data: ValueData) => { 
     return { value: data.AttrValue, label: data.Value }; 
    }); 
} 

テンプレート

<form novalidate [formGroup]="form"> 
<span> 
    <ng-select formControlName="AttributeValue" [multiple]="true" [options]="getOptions(ruleAttributeData.AttributeValue)" placeholder="Click to Select a Value" class="inlineSelect"> 
    </ng-select> 
</span> 
</form> 

私はこれを試していません（以前はでしたが、私はかなりうまくいきました。コンポーネントで使用されている変数/メソッドを、特定のユースケースで動作させる方法に調整する必要があるかもしれません。それが役に立てば幸い。