ng2Charts / chart.js изменение типа диаграммы для одного влияет на многие диаграммы

Question

У меня есть панель с несколькими графиками.Над каждой диаграммой у меня есть опция выбора для типа диаграммы (гистограмма, круговая диаграмма или линия).Теперь ... в моем коде он меняет все диаграммы на сайте, когда вы выбираете тип, но я хочу изменить только диаграмму, где пользователь выбрал тип.

Вот Stackblitz моей проблемы:https://stackblitz.com/edit/angular-yvy8mf

Не могли бы вы, ребята, помочь мне?

  shapes = [
    { id: "bar", display: "bar chart" },
    { id: "pie", display: "pie chart" },
    { id: "line", display: "line chart" },
  ];

onChange(event) {

    this.selectedType = event.target.value;
   
  }  

  <div id="content" class="form__card" *ngFor="let a of model[0]?.category; let ix = index">
   
      <ng-container *ngFor="let b of a.question; let iy = index">
       
                  <select *ngIf="categoryQuestion.questionType != 'text'" class="form-control input-sm " (change)="onChange($event)">
                    <option disabled selected>Wähle einen Chart Typ </option>
                    <option *ngFor="let t of shapes" [value]=t.id>{{t.display}}</option>
                  </select>

           

                <div *ngIf="selectedType === 'bar'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"                [options]="barChartOptions"
                    [legend]="barChartLegend" [options]="chartOption" [chartType]="'bar'"></canvas>

                </div>

                <div *ngIf="selectedType === 'pie'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"          [options]="pieChartOptions"
                    [chartType]="'pie'" (chartHover)="chartHovered($event)"></canvas>

                </div>

                <div *ngIf="selectedType === 'line'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)" [options]="lineChartOptions"
                    [chartType]="'line'" (chartHover)="chartHovered($event)" [legend]="lineChartLegend"></canvas>

                </div>   
    </ng-container>
  </div>

Answer 1

Чтобы увидеть рабочий код здесь

Проблема заключалась в том, что выбранное значение было сохранено на уровне категории ... однако выбор был сделан на уровне вопроса... вот почему данные первого и третьего графиков считывали один и тот же тип, а вторые и четвертые - одинаковый тип

Согласно иерархии данных:

• категория> вопрос> уникальный график
• категория ( ранее выбранное значение хранилось здесь)> вопрос> уникальный график
• категория> вопрос ( сейчас выбранное значение сохраняется здесь)> уникальный график

onChange функция

onChange(event, ix, iy) {
    console.log("for:" + ix + " & " + iy + ", selected type" + event.target.value);
    this.selectedType[iy] = event.target.value;
    this.evaluationModel[0].category[ix].question[iy].selectedType = event.target.value;
  }