角度素材のデフォルトアイテムを選択する方法2複数選択

Question

私は角度2の素材アプリで作業しています。マルチアイテム要素があるケースがあります。チェックボックス付きのリストがあるので、複数のアイテムを選択できます。時間。私は角物質のコンポーネントでそれをすることができますが、私が欲しいのは、2-3のアイテムがデフォルトでチェックされ、特定のアイテムを選択/選択解除すると、チェック/選択フラグをtrue/falseとして取得する必要があります。

<md-select multiple="true" [(mgModel)]="test"> 
    <md-option *ngFor="let l of list" [value]="l"> 
    {{l.name}} 
    </md-option> 
</md-select> 

var list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}] 

var test = [{{name:'abc'},{name:'cbv'}] 

どこか別の方法がありますか、間違っています。

Answer 1

あなたtest配列はlist配列から要素を含める必要があります：あなたはselectのoptionにobjectをバインドする場合は、角度がオブジェクトインスタンスによってデフォルト値とオプションの値を比較します

list = [{name:'abc'},{name:'cbv'},{name:'hgf'},{name:'rty'},{name:'fdv'},{name:'vbg'}]; 

test = this.list.slice(0,2); 

Plunker Example

Answer 2

。ここで{name: 'abc'}と{name:'cbv'}はlistとtestのフィールドと値は同じですが、それぞれ異なるインスタンスを保持しています。したがって、いずれもselectedに設定されません。

@ yurzuiの答えは、両方の配列で同じオブジェクトインスタンスを保持することによって機能します。

compareWithディレクティブを使用する別のソリューション（docsを参照）。このようにして、compareWith関数を実装して、オブジェクト間の比較方法を指示する必要があります。

<md-select multiple="true" [(ngModel)]="test" [compareWith]="compareWithFunc"> 
    <md-option *ngFor="let l of list" [value]="l"> 
    {{l.name}} 
    </md-option> 
</md-select> 

compareWithFunc(a, b) { 
    return a.name === b.name; 
} 

Plunker demo参照してください。