Question

这是一个非常基本的问题。

我正在尝试使用ngx图在Angular 5中构建图表。

我的组件如下所示：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'top-5-loc',
  templateUrl: './top-5-loc.component.html',
  styleUrls: ['./top-5-loc.component.scss']
})
export class Top5LocComponent implements OnInit {
  public data: string;
  public options: {};

  constructor() {
      this.data = '23';
      this.options = {
        'view': [700, 400],
        'xAxis': true,
        'yAxis': true,
        'roundEdges': true,
        'showLegend': false,
        'showXAxisLabel': true,
        'xAxisLabel': 'Location',
        'showYAxisLabel': true,
        'yAxisLabel': 'Volume',
        'gradient': false,
        'gridLines': false,
        'colorScheme': {
          'domain': ['#0d3953']
       }
      };
      console.log(this.options);
   }

  ngOnInit() {
  }

}

我的视图如下：

<h4>Top 5 Locations</h4>
<ngx-charts-bar-vertical
  [view]="options['view']"
  [scheme]="options['colorScheme']['domain']"
  [results]="data"
  [gradient]="options['gradient']"
  [xAxis]="options['xAxis']"
  [yAxis]="options['yAxis']"
  [legend]="options['showLegend']"
  [showXAxisLabel]="options['showXAxisLabel']"
  [showYAxisLabel]="options['showYAxisLabel']"
  [xAxisLabel]="options['xAxisLabel']"
  [yAxisLabel]="options['yAxisLabel']"
  [showGridLines]="options['gridLines']"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

我在控制台中收到一条错误消息：“错误TypeError：无法将未定义或null转换为对象”

我在做什么错？

Answer 1

将选项定义为这样的组件文件中的任何类型。

 public options: any;

或

public options = {};

此外，组件文件中缺少“ onSelect”事件。

Answer 2

public options: {};

您在这里拥有的是类型为{}的未定义对象，该对象没有属性。

您可以在构造函数之外初始化属性。

import { Component, OnInit } from '@angular/core';
import { PrincipalService } from '../../services/principal.service';

@Component({
  selector: 'top-5-loc',
  templateUrl: './top-5-loc.component.html',
  styleUrls: ['./top-5-loc.component.scss']
})
export class Top5LocComponent implements OnInit {
  public data = '23';
  public optionsoptions = {
        'view': [700, 400],
        'xAxis': true,
        'yAxis': true,
        'roundEdges': true,
        'showLegend': false,
        'showXAxisLabel': true,
        'xAxisLabel': 'Location',
        'showYAxisLabel': true,
        'yAxisLabel': 'Volume',
        'gradient': false,
        'gridLines': false,
        'colorScheme': {
          'domain': ['#0d3953']
       }
      };

  constructor() { }

  ngOnInit() {
  }

}

在View Angular 5中使用JS对象值

2 个答案: