web-dev-qa-db-ja.com

Angular2 / 4 mat-select複数ngModel

複数の有効なマット選択ドロップダウンリストがあり、NgModelを使用してユーザーが選択した値を保存しています。

問題は、別のページに移動して戻ってきたときに、ユーザーが選択した値がmat-selectにないことです。ngModelにこれらの値があることがわかっています...

HTML

<mat-form-field>
 <mat-select placeholder="Customers" name="customerDetails" ngDefaultControl       
 formControlName="customerDetails" [(ngModel)]="custonerDetails" 
 [formControl]="customerDetailsCtrl" multiple   
 (ngModelChange)="onCustomerValueChanges(customer)" >

  <mat-option *ngFor="let customer of customerDetailsResult"
  [value]="customer">{{customer.CustomerNo}}- 
                     {{customer.CustomerDescription}}
   </mat-option>
 </mat-select>
</mat-form-field>

何か案は？

angularangular-materialangular2-formsangular2-ngmodel
6
Maiur Laximidas

ユースケースによっては、一部のデフォルトオプションを選択済みとして初期化することは、単にngModelにバインドするだけでは機能しない場合があります。これは、オプション内および前の状態から選択したサブセット内のオブジェクトIDが異なるであるためです。 compareWithのサポートのおかげで、それらを選択されたとおりに設定することができます。

公式Angular docs here をご覧ください。

Material2 demo-appには、2つの実装を持つ関数の例があります。 ここ です。

私のコンポーネントには、マット選択のオプション用のユーザーオブジェクト[人々]のコレクションがあります。コンポーネントは、選択されたユーザーオブジェクト[ユーザー]のコレクションを以前の状態からの入力として受け取ります。十分なことに、[people]のオブジェクトと[users]のオブジェクトは異なるIDを持ち、複数選択のサブセットはデフォルトで選択されたチェックボックスで初期化されません。

そのため、魔法のcompareWithは、文字通りオブジェクトを特定の値で比較し、trueまたはfalseを返すだけで、[people]のサブセットのチェックボックスは選択されたステータスを取得します。私のコードでは、[（ngModel]）バインディングを使用することにしました。

<mat-form-field>
    <mat-select [compareWith]="compareFn" name="users" [(ngModel)]="users" multiple>
        <mat-option *ngFor="let person of people" [value]="person">
           {{ person.username }}
        </mat-option>
   </mat-select>
</mat-form-field>

.tsファイルでは、Angular docの関数を使用して、2つのUserオブジェクトのIDが同じ場合にtrueを返します。

compareFn(user1: User, user2: User) {
    return user1 && user2 ? user1.id === user2.id : user1 === user2;
}

同様のユースケースがある場合は、そのまま使用できる場合があります。

フードの下にあるメモで、compareWithに興味がありました。これは、Angular2のlooseIdentical（外観は here ）と呼ばれる関数に基づいており、GoogleのDart.jsライブラリの同一のものから派生していることがわかりました。 here にあります。

9
RedDree

[(ngModel)]="custonerDetails"をチェックしてください。スペルに間違いがあると思います。[(value)]="custonerDetails"のように使用することもできます。

0
manish sharma