обновить содержимое страницы - PullRequest
Новая
       17

обновить содержимое страницы

0 голосов
/ 18 мая 2018

У меня есть диаграмма Морриса, которая сравнивает статистику разных студентов.У меня также есть модальный режим, в котором я могу добавить нового учащегося, и график должен обновляться с учетом новой статистики учащегося.После добавления график обновляется, но только когда я обновляю всю страницу.Как бы я обновить страницу без обновления?

component.ts 

  ngOnInit() {
    this.getData();
  }
getData() {
        this.http.get('url')
          .subscribe(data => {

            const graphData = data.stathistory;
            const graphDataArr = [];
            let currentChar = 'a';

            for (const graphdata in graphData) {
              const curDate = graphdata.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3');
              const graphdataObj = { 'y': curDate };

              for (const element in graphData[graphdata]) {
                graphdataObj[currentChar] = Number(graphData[graphdata][element].rank);
                currentChar = this.nextChar(currentChar);
              }

              graphDataArr.push(graphdataObj)
              currentChar = 'a';
            }

            const yKeysArr = [];

            for (let i = 0; i < data.domains.length; i++) {
              yKeysArr.push(currentChar);
              currentChar = this.nextChar(currentChar);
            }
            this.generateChart(graphDataArr, data.names, yKeysArr);
          });
      }

      generateChart(graphRanks = [], names = [], yKeys = []) {

        this.graphData = graphRanks;
        this.graphOptions = {
          xkey: 'y',
          ykeys: yKeys,
          labels: names,
          resize: true,
          parseTime: false,
          pointSize: 0,
        };

      }


addStudent(name) {
    this.http.post('url', {
      name: name,
    })
      .subscribe(response => {
          this.getData();
      }
      );
  }

html 

    <div *ngIf = 'graphData'  mk-morris-js [options]="graphOptions" [data]="graphData" type="Line" style="height: 500px; width: 100%;">

**code for modal dialog**

    <button type="button" class="btn btn-primary" (click)="addStudent(name)">

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Ответы [ 3 ]

0 голосов
/ 18 мая 2018

Я бы порекомендовал сделать ваши graphData наблюдаемыми и использовать асинхронный канал в html.Примерно так: 

graphData$ = this.http.get('url').pipe(
    map(x => // do stuff with x here)
)

Затем в своем html вы можете сделать: 

[graphData]="graphData$ | async"

Вот хороший пост Тодда Мотто на материале ng-if: https://toddmotto.com/angular-ngif-async-pipe

РЕДАКТИРОВАТЬ:

Если вы не хотите, чтобы ваши graphData были наблюдаемыми - вы, вероятно, могли бы использовать switchMap в вашей функции addStudent. 

addStudent(name) {
this.http.post('url', {
  name: name,
})
  .pipe(
      switchMap(x => this.getData())
  }
  );

}

0 голосов
/ 07 июня 2018

Я наконец-то заработал.Я попытался очистить диаграмму Морриса и создать диаграмму с новыми данными.Таким образом, всякий раз, когда происходит изменение данных, он очищает график и перерисовывает график новыми данными.

Очистка графика 

document.getElementById('idofthegraph').innerHTML = '';

Это снова нарисует график 

this.generateChart(graphDataArr, data.names, yKeysArr);
0 голосов
/ 18 мая 2018

Это выглядит хорошо.Я бы предложил вам добавить console.log (graphRanks);как раз перед этим.graphData = graphRanks;чтобы гарантировать, что новые данные загружаются, когда ожидается.Кстати, ваша кнопка вызывает функцию addDomain (имя) , в то время как в вашем скрипте имя функции - addStudent (name) .

...