Question

我正在使用Angular Material。

问题出在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。但事实并非如此。

Answer 1

你好@Surjeet Bhadauriya

您可以尝试使用此解决方案。

我已经在Stackblitz上创建了一个演示

将FROM openjdk:slim用于[compareWith]="compareObjects"

中的对象

component.html

mat-select

component.ts

<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>

如果值是对象，则在mat-select下拉列表中未绑定值

1 个答案: