Как передать переменную в анимацию высоты в angular 8 анимациях? - PullRequest
Новая
       29

Как передать переменную в анимацию высоты в angular 8 анимациях?

0 голосов
/ 14 марта 2020

Я создаю приложение Angular 8, которое загружает некоторые гистограммы. У меня вопрос, как анимировать высоту баров при загрузке страницы или когда пользователь загружает новые данные из бэкэнда.

Сама гистограмма Вот код HTML, показывающий, как я построил график и мои попытки, основанные на исследованиях, достичь цели: 

<div class="chart-container" *ngIf="!loading ">
  <div class="bars-container">
    <div class="bar-container" *ngFor="let value of data; let i = index">
      <div
        class="bar"
        [@expand]="{ value: true, params: { elemH: dataLog[i][j] } }"
        *ngFor="let valor of valores; let j = index"
        [style.height.%]="dataLog[i][j]"
        [style.backgroundColor]="seriesColors[j]"
        [style.flexBasis.%]="barWidth"
      >
        <span>{{ valor }}</span>
      </div>
    </div>
  </div>
</div>

Вот как я получаю относительную высоту для всех баров: 

@Component({
  selector: 'app-grafico-vertical',
  templateUrl: './grafico-vertical.component.html',
  styleUrls: ['./grafico-vertical.component.scss'],
  animations: [
    trigger('expand', [
      transition(':enter', [animate(2000, style({ height: '{{elemH}}%' }))], {
        params: { elemH: 0 }
      })
    ])
  ]
})
export class GraficoVerticalComponent implements OnInit {
  @Input() data: number[][];
  @Input() barWidth: number;
  @Input() seriesColors: string[];
  @Input() loading = false;

  maxValue: number;
  dadosLog: number[][];

  constructor() {}

  ngOnInit() {
    this.maxValue= Math.max(
      ...this.data.reduce((acc, cur) => acc.concat(cur), [])
    );

    this.dadosLog = this.data.map(values =>
      values.map(
        value =>
          (Math.log10(valor === 1 ? 10 : value) * 100) /
          Math.log10((this.maxValue === 1 ? 10 : this.maxValue) * 1.5)
      )
    );
  }
}

Итак, мой вопрос Как я могу передать это значение высоты для анимации, если это вообще возможно? И как я мог вызвать это?

OBS: я опустил некоторый код, который не имеет отношения к самим барам.

...