Значение не является обязательным в раскрывающемся списке mat-select, если это объект - PullRequest
Новая
       10

Значение не является обязательным в раскрывающемся списке mat-select, если это объект

0 голосов
/ 01 июля 2018

Я использую угловой материал.

Проблема связана с mat-select. Это не связывает значение при редактировании записи.

Вот мой код ..

HTML

Здесь, как вы можете видеть, я связал test.subject (объект) в модели и показал subject.title в раскрывающемся списке в виде текста. 

   <mat-form-field>
     <mat-select [(ngModel)]="test.subject" placeholder="Subject" name="subject">
       <mat-option>--</mat-option>
       <mat-option *ngFor="let subject of subjects" [value]="subject">
         {{subject.title}}
       </mat-option>
     </mat-select>
   </mat-form-field>

Компонент

В компоненте я получил это значение из базы данных. 

this.test = {
   "subject": {
       "_id": "5b3883b4067d8d2744871eff",
       "title": "Subject 1"
    }
}

this.subjects = [
   {
       "_id": "5b3883b4067d8d2744871eff",
       "title": "Subject 1"
   },{
        "_id": "5b3843b4067d8d2744435erx",
        "title": "Subject 2"
   }
]

Итак, я ожидаю, что выпадающий список должен быть выбран со значением Subject 1. Но это не так.

1 Ответ

0 голосов
/ 01 июля 2018

Привет @Surjeet Bhadauriya

Вы можете попробовать это решение.

Я создал демо на Stackblitz

использовать [compareWith]="compareObjects" для использования объекта в mat-select

component.html 

<mat-form-field>
    <mat-select [compareWith]="compareObjects" [(ngModel)]="test.subject" placeholder="Subject" name="subject">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let subject of subjects" [value]="subject">
            {{subject.title}}
        </mat-option>
    </mat-select>
</mat-form-field>

component.ts 

test: any;
subjects: Array<any>;

compareObjects(o1: any, o2: any): boolean {
    return o1.name === o2.name && o1._id === o2._id;
}
...