Angular 5无法读取未定义的属性“target”

时间:2018-01-17 14:59:57

标签: javascript angular

我嵌入了一个图表小部件,想要通过将值从下拉菜单传递到图表的symbol作为数据引用来动态呈现图表。该应用程序可以工作,但控制台日志会在初始化视图时显示错误。

这是我的代码:

组件:

export class TradeChartComponent implements OnInit, AfterViewInit {

  @Output() emitValue: EventEmitter<string> = new EventEmitter<string>();

  selectedValue: any;

  constructor(
    private http: HttpClient,
    private apiService: ApiService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  selectPair(pair) {
    // tslint:disable-next-line:no-unused-expression
    const widget = new TradingView.widget({
      'container_id': 'technical-analysis',
      'autosize': true,
      'symbol': pair,
      'interval': '120',
    });
  }

  onChange(event: any) {
    const widget = this.selectPair(event.target.value);
    this.emitValue.emit(this.selectedValue);
  }

  ngOnInit() {
    this.selectPair('BTCUSD');
  }

  ngAfterViewInit() {
    this.onChange(event);
  }
}

查看:

<select (change)="onChange($event)" class="form-control" [(ngModel)]="selectedValue">
    <option value="BTCUSD">BTC/USD</option>
    <option value="ETHUSD">ETH/USD</option>
</select>

<div id="technical-analysis" style="height: 280px"></div>

1 个答案:

答案 0 :(得分:2)

  

无法读取未定义

的属性'target'

表示您使用的对象没有target属性。

让我们在您的代码中搜索target用法:

const widget = this.selectPair(event.target.value);

这意味着您有一个空的event对象。

你说加载组件时会发生这种情况吗?然后让我们看看你的构造函数和生命周期钩子:

  ngAfterViewInit() { this.onChange(event); }

在这里:你将一个不存在的事件传递给你的函数,使它抛出一个错误。这个event来自哪里?您的IDE应该警告您它不存在。

只需删除此行,或测试您的事件是否为空,并且您的错误将自行解决。