代码之家 › 专栏 › 技术社区 › yer

更新页面内容

refresh components

yer · 技术社区 · 6 年前

我有一张比较不同学生统计数据的莫里斯图表。我也有一个模式,我可以添加一个新的学生,并且图表应该用新的学生统计数据更新。添加后,图形将得到更新,但仅当我刷新整个页面时。如何在不刷新的情况下更新页面?

组件.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 回复 | 直到 6 年前

Pierre 6 年前

这看起来不错。我建议您在this.graphdata=graphranks;之前添加console.log(graphranks),以确保在需要时加载新数据。通过按钮调用函数 adddomain(名称) 在脚本中,函数名是 添加学生(姓名) .

ye-olde-dev 6 年前

我建议您将图形数据设置为可观察的,并在HTML中使用异步管道。像这样:

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

然后,在HTML中,您可以使:

[graphData]="graphData$ | async"

以下是托德的一篇很好的关于国家队的格言: https://toddmotto.com/angular-ngif-async-pipe

编辑:

如果你不想让你的图形数据成为可观察的——你可以在你的addstudent函数中使用一个switchmap。

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

}

yer 6 年前

我终于成功了。我试图清除Morris图表并用新数据生成图表。因此,每当有数据更改时,它将清除图形并用新数据重新绘制图形。

清除图表

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

这会再次绘制图表

this.generateChart(graphDataArr, data.names, yKeysArr);