мат-слайдер реагирует странно в цикле при перетаскивании

Question

Я разрабатываю skillBD и использую ползунок для отображения и изменения значения навыка.У меня есть два массива.один для пользователей и в соответствии с навыками пользователя.Так что я читаю в цикле пользователей и в этом цикле навыки для пользователя.В теге mat-slider я использую ngModel, чтобы изменить значение массива навыков, когда ползунок перетаскивается.Проблема в том, что, если ngModel добавлен в тег, фактическое И следующий ползунок цикла реагирует на перетаскивание ползунка.Вместо этого значение корректно изменено в массиве.если я удаляю ngModel из тега mat-slider, ползунок работает нормально.

Я пытался изменить значение массива при перетаскивании, отправив их в функцию через input = MyFunc (), ноэто все то же поведение.

<mat-accordion multi="true" *ngIf="posts.length > 0" layout="row">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
      <mat-action-row>
        <div *ngFor="let value of post.skillValues; let i = index"> 
          {{ skills[i]?.title }}
          <br>
          <mat-slider [(ngModel)]="post.skillValues[i]"  min="0" max="5" step="1" value="{{value}}"></mat-slider>
<!--          <mat-slider (input)="updateSkillArray($event, post, i)" min="0" max="5" step="1" value="{{value}}"></mat-slider>-->
        </div> 
      <button mat-button color="warn" (click)="onSave(post)">SAVE</button>
      <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0">No posts added yet!</p>