Question

的index.html

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platform.browser.bootstrap(app.AppComponent);
  });
})(window.app || (window.app = {}));

应用程序/ main.js

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: `<div class="col-md-6">
    <base-chart class="chart"
                [data]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
                [series]="lineChartSeries"
                [chartType]="lineChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>
  </div>
  <div class="col-md-6">
    <base-chart class="chart"
                [data]="pieChartData"
                [labels]="pieChartLabels"
                [chartType]="pieChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)"></base-chart>
  </div>
  <div class="col-md-12 text-center" style="margin-top: 10px;">
    <button (click)="randomizeType()" style="display: inline-block">Toggle</button>
  </div>

      `
    })
    .Class({

      constructor: function() {
  this.lineChartData = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  this.lineChartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  this.lineChartSeries = ['Series A', 'Series B', 'Series C'];
  this.lineChartOptions = {
    multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
  };

  this.lineChartLegend = true;
  this.lineChartType = 'pie';
  this.pieChartLabels = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
  this.pieChartData = [300, 500, 100];

  },


  randomizeType:function() {
    this.lineChartType = this.lineChartType === 'Line' ? 'Bar' : 'Line';
    this.pieChartType = this.pieChartType === 'Doughnut' ? 'Pie' : 'Doughnut';
  },
  chartClicked:function($event) {
    console.log($event);
  },

  chartHovered:function($event) {
    console.log($event);
  },

    });
})(window.app || (window.app = {}));

应用程序/ app.component.js

<div ng-show="IsParentExist" class="ng-hide">
        <table>
            <thead>
                <tr><th>a</th>
                <th>b</th>
            </tr></thead>
            <tbody>
                <tr ng-show="noValueExist" class="ng-hide">
                    <td>There are no records to show here.</td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>

请帮助解释此代码中的错误。

Google Chrome控制台显示此消息.. ＆＃34; Angular 2正在开发模式下运行。调用enableProdMode（）以启用生产模式。＆＃34;

模板也在此代码中。

Answer 1

如果您使用组件，则需要在组件的directives属性中明确指定它：

(function(app) {
  app.AppComponent =
    ng.core.Component({
      selector: 'my-app',
      template: `<div class="col-md-6">
        (...)
      `,
      // component class for "base-chart"
      directives: [ BaseChart ] // <-------
    })
    ...

否则您的组件将不会被评估......

Answer 2

我通过在HTML图表div上添加* ngIf =“ isDataLoaded”解决了此问题。 isDataLoaded是在服务器响应后为true的变量。

我正在创建一个角度为2的图表应用程序。我没有得到错误，但图表没有显示

2 个答案: