title: mat-select mat-option angular drop down doesn't change value after you select other value from dropdown
body: <p><a href="https://i.stack.imgur.com/7Bhjv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Bhjv.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/MKzON.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MKzON.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/kuRRf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kuRRf.jpg" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/xvop6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xvop6.jpg" alt="enter image description here" /></a></p>
  <p>I am using Angular material table, mat-select and mat-option drop down,  For the Media dropdown, the value was Email, lk_type was 3287, after I select phone, the media value should be phone and lk_type should be 3286, however, when I click on the edit button, this.currentData didn't change dropdown value, it still keeping the old value, do you know how I can change my drop down value for this angular  mat-select and mat-option dropdown?</p>
  <p>add-person.component.html</p>
  <pre><code>&lt;mat-table [dataSource]=&quot;dataSource&quot;&gt;
    &lt;ng-container matColumnDef=&quot;person_contact_ID&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Person Contact ID &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;
        &lt;mat-form-field floatLabel=&quot;{{ row.editing ? 'float' : 'never'}}&quot;&gt;
          &lt;input [(ngModel)]=&quot;row.currentData.person_contact_ID&quot; placeholder=&quot;Person Contact ID&quot; [disabled]=&quot;!row.editing&quot; matInput&gt;
        &lt;/mat-form-field&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  &lt;ng-container matColumnDef=&quot;media&quot;&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Media &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;
        &lt;mat-form-field&gt;
          &lt;mat-select style=&quot;min-width: 200px;&quot; placeholder=&quot;&quot; value=&quot;{{row.currentData.lk_type}}&quot;&gt;
            &lt;mat-option *ngFor=&quot;let media of mediaList &quot; value=&quot;{{media.lookup_id}}&quot;&gt;
              {{ media.descr }}
            &lt;/mat-option&gt;
          &lt;/mat-select&gt;
        &lt;/mat-form-field&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    
  
  &lt;ng-container matColumnDef=&quot;actionsColumn&quot;&gt;
      &lt;mat-cell *matCellDef=&quot;let row&quot;&gt;
        &lt;button *ngIf=&quot;row.editing&quot; mat-icon-button color=&quot;primary&quot; focusable=&quot;false&quot; (click)=&quot;row.confirmEditCreate_AddPerson()&quot;&gt;
          &lt;i class=&quot;fa fa-check mat-icon&quot;&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  &lt;mat-header-row *matHeaderRowDef=&quot;displayedColumn
  s&quot;&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  
  </code></pre>
  <p>tabledata.ts</p>
  <pre><code>confirmEditCreate_AddPerson(): boolean {
      //_personService: TestRDB2Service;
      if (this.id == -1)
        return this.source.confirmCreate(this);
      else
        
        try {
          this._http.put(&quot;https://localhost:5001/&quot; + 'api/TestRDB2/AddUpdatePerson_Contact/', this.currentData).subscribe();        
        } catch (e) {
          return e
        }
      return true;
        //return this.source.confirmEdit(this);
    }
  </code></pre>