title: Creating mat-option elements with ngFor when list initialized empty
body: <p>I would like to update values in the "specialisation" mat-select" when I select a skill in my "competence" mat-select. I linked my var with the model using <code>[(ngModel)]</code> but it won't update the list.</p>
  
  <p>I tried to use ngModel, with angular &amp; material 7. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field&gt;
    &lt;mat-select name="competence_1_name" [(ngModel)]="competence_1.name"&gt;
      &lt;mat-option&gt;-- Faites un choix --&lt;/mat-option&gt;
      &lt;mat-option *ngFor="let competence of competences" value="{{competence.name | lowercase}}"&gt;{{competence.name}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
    &lt;mat-label&gt;Compétence&lt;/mat-label&gt;
  &lt;/mat-form-field&gt;
  [...]
  &lt;mat-form-field&gt;
    &lt;mat-select name="competence_1_spe_1" [(ngModel)]="competence_1.specialisation_1"&gt;
      &lt;mat-option&gt;-- Faites un choix --&lt;/mat-option&gt;
      &lt;mat-option *ngFor="let specialisation of competence_1.specialisation_list" value="{{specialisation | lowercase}}"&gt;{{specialisation}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
    &lt;mat-label&gt;Spécialisation&lt;/mat-label&gt;
  &lt;/mat-form-field&gt;&lt;br&gt;
  </code></pre>
  
  <p><strong>main class:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class GeneratePnjComponent implements OnInit {
  
      competences: Array&lt;Competence&gt;;
      masteries: Array&lt;string&gt;;
      competence_1 = new Competence("");
      competence_2 = new Competence("");
      competence_3 = new Competence("");
      name: string;
      cost: number;
      time: number;
      ...
  }
  </code></pre>
  
  <p><strong>Class for a skill:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class Competence {
      name: string;
      mastery: string;
      specialisation_1: string;
      specialisation_2: string;
      specialisation_list: Array&lt;string&gt;;
  
      constructor(name: string) {
          this.name = name;
          this.specialisation_list = new Array&lt;string&gt;();
      }
  }
  </code></pre>
  
  <p>Expected result: the list 'competence_1_spe_1' update when I choose a value on the list 'competence_1_name'</p>
  
  <p>Actual result: No value in the list 'competence_1_spe_1' even if I choose a value in the list 'competence_1_name'</p>