title: Why won't my <mat-select> have the specified value selected when loaded?
body: <p>I've created a form to edit data in a table.  Several fields of the form are drop down lists (mat-select) that are populated from other tables in a database.  I'm populating the drop downs (mat-select) successfully, but I'm struggling to set the selected value to match the data from the row that the user is intending to edit.</p>
  
  <p>I actually have one dialog working, but for some reason a more complex dialog (with 3 drop downs) is not working.  I was originally only setting the ngModel, but I've added in the [comparewith] in hopes of resolving the problem or learning more.  My compare method always receives a null value for the second parameter.</p>
  
  <p>certificationEdit.dialog.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>       &lt;div class="form"&gt;
              &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Connector - {{m_connectorid}}&lt;/mat-label&gt;
                  &lt;mat-select [(ngModel)]="m_connectorid" [value]="m_connectorid" [compareWith]="compareConnector" required&gt;
                      &lt;mat-option *ngFor="let item of connectorList" [value]="item.id"&gt; {{item.connector}} ({{item.id}}) &lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>certificationEdit.dialog.component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class CertificationEditDialogComponent {
  
    connectorList = [];
    m_connectorid: string;
  
    ngOnInit() {
  
      this.databaseService.loadConnectorList().subscribe(response =&gt; {
  
        this.connectorList = response as any[];
      });
  
    }
  
    compareConnector(obj1: string, obj2: string) {
      return obj1 === obj2;
    }
  
    constructor(
      public dialogRef: MatDialogRef&lt;CertificationEditDialogComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: CERTIFICATION,
      public databaseService: DatabaseService
    ) {
      this.m_connectorid = this.data.connectorid;
     }
  </code></pre>
  
  <p>The code opening the edit dialog:</p>
  
  <pre class="lang-js prettyprint-override"><code>    public CertificationStartEdit(
          i: number,
          id: string,
          releaseid: string,
          productid: string,
          connectorid: string,
          certtype: string,
          driverversion: string,
          certdate: string,
          changeneeded: string,
          comments: string
      ) {
          //this.release = release;
          this.index = i;
          const dialogRef = this.dialog.open(CertificationEditDialogComponent, {
              data: {
                  id: id,
                  releaseid: releaseid,
                  productid: productid,
                  connectorid: connectorid,
                  certtype: certtype,
                  driverversion: driverversion,
                  certdate: certdate,
                  changeneeded: changeneeded,
                  comments: comments
              }
          });
  </code></pre>
  
  <p>The label shows m_connectorid has the value I expect, and the drop down list shows the id used for the value has the value I expect. None the less, the value I expect to be selected is not being selected.</p>