Модель меняется автоматически в угловых 6

Question

Я генерирую динамический раскрывающийся список на основе моей модели и пытаюсь установить выбранный элемент так же, как данные из модели.Я делаю все это в цикле *ngFor.Но в первый раз после загрузки страницы она привязывает правильные значения к раскрывающемуся списку, но как только я щелкаю внутри окна, он изменяет значения во всех раскрывающихся списках на одно и то же значение и выдает ошибку ниже:

ExpressionChangedAfterItHasBeenCheckedError:Выражение изменилось после того, как оно было проверено.Предыдущее значение: 'model: d9cddd06-911a-4fea-9b87-f045362ede52'.Текущее значение: 'model: bd39b9a1-42f2-4db1-9639-953206062l67'

Я пытался использовать детектор изменений в ngOnInit, ngAfterViewInit и даже в методе подписки, где я получаю модель.

Я также пытался использовать ngModelChange, но не повезло.Я получаю сообщение об ошибке в третьей строке кода ниже: [(ngModel)]="data.reportTypeTemplate[i].reportTemplateId" Сейчас я не уверен, как решить эту проблему.Кто-нибудь сталкивался с этой проблемой или знает решение для этого.Дайте мне знать, если потребуется дополнительная информация.

Ниже мой код:

<div class="form-group" *ngFor = "let type of masterRTTList; let i = index">
          <label for="reportType">{{type.reportTypeName}}*</label>
          <select [(ngModel)]="data.reportTypeTemplate[i].reportTemplateId" //Here 
*ngIf="data.reportTypeTemplate.length > 0"
          class="form-control rounded-0" formControlName="reportType">
            <option value = "">Select Template</option>
            <option *ngFor="let template of type.reportTemplateName" [ngValue]="template.id">
              {{template.name}}
            </option>
          </select>
</div>

ngOnInit(){
this.apiService.get(environment.api_url, 'GetReports/')
      .subscribe(templates => {
        this.masterRTTList = templates 
      });
}