javascript - Angular 5无法读取未定义的属性 'target'

Question

我嵌入了一个图表小部件，并希望通过将下拉菜单中的值作为数据引用传递到图表的 symbol 来动态呈现图表。该应用程序可以运行，但控制台日志在初始化 View 时立即显示错误。

这是我的代码:

组件:

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>

Answer 1

Cannot read property 'target' of undefined

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

让我们在代码中搜索目标用法:

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

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

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

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

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

只需删除此行，或测试您的事件是否不为空，您的错误就会自行解决。