Используйте значения объекта JS в угловом представлении 5

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: Невозможно преобразовать неопределенное или нулевое значение в объект»

Что я делаю неправильно?

Answer 1

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() {
  }

}

Answer 2

Определите параметры как любой тип в файле компонента, как этот.

 public options: any;

или

public options = {};

Кроме того, в файле компонента отсутствует событие "onSelect".