Блог

Главная - Вопросы по программированию - Угловой перенос значений из массива в другой массив меток диаграммы

Угловой перенос значений из массива в другой массив меток диаграммы

#arrays #angular #charts #label

Вопрос:

Я пытаюсь вставить значения в массив меток диаграммы, но после этого они не отображаются на графике. Я делаю что-то не так? Вот код.

 public barChartLabels: Label[] = [];

this.mailboxTags.getTotalPending().subscribe((tags: Tag[]) => {
  for (let index = 0; index < tags.length; index  ) {
    if(tags[index].type == 'category')
    {
      this.barChartLabels.push(tags[index].name);
    } 
  }
});

Поэтому, если я консольно регистрирую метки штрих-кодов после ввода значений, я получаю следующее,

 0: "general"
1: "Software"
length: 2
[[Prototype]]: Array(0)

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

 public barChartLabels: Label[] = ['general', 'software'];

тогда это работает. Что я здесь делаю не так? Я даже попробовал

 this.barChartLabels.push(tags[index].name.toString());

но это все равно не работает.
Редактировать: Только что позже обнаружил, что это работает, просто изменения не отражаются сразу после загрузки страницы. Мне нужно нажать на что-то, чтобы изменения появились.

Комментарии:

1. Как на это barChartLabels ссылаются в вашем шаблоне?

2. <div стиль=»отображение: блок;»> <div стиль=»отображение: блок;»><базовая диаграмма холста [наборы данных]=»barChartData» [метки]=»Метки» [параметры]=»Параметры» [плагины]=»Плагины для карт» [легенда]=»barChartLegend» [Тип диаграммы]=»Тип диаграммы»> <базовая диаграмма холста [наборы данных]=»Метки» [метки]=»Метки» [параметры]=»Параметры barChartOptions» [плагины]=»Плагины BarChart» [легенда]=»barChartLegend» [Тип диаграммы]=»Тип диаграммы»></холст> </холст></div> Позже я обнаружил, что он работает, но не загружает изменения на загруженную страницу. Мне нужно нажать на что-то, после чего график обновится. Есть ли в любом случае способ это исправить?

Ответ №1:

Это может быть связано с тем, как работает обнаружение изменений в Angular. Когда Angular проверяет, нуждается ли представление в обновлении, он проверяет, изменились ли значения выражений в шаблоне.

В этом случае barChartLabels произошла мутация, но ссылка та же. Angular не проверяет наличие изменений в объекте, поэтому представление не обновляется.

Один из способов исправить это-назначить barChartLabels in subscribe .

 this.mailboxTags.getTotalPending().subscribe((tags: Tag[]) => {
  const categoryTagNames = [];
  for (let index = 0; index < tags.length; index  ) {
    if(tags[index].type == 'category')
    {
      categoryTags.push(tags[index].name);
    } 
  }
  this.barChartLabels = categoryTagNames;
});
Метки: