Question

我能够嵌入在这里找到的TradingView小部件（https://www.tradingview.com/widget/advanced-chart/）。但是，我想通过动态地在symbol内分配值TradingView.widget来选择不同的值对以呈现不同的图表时动态更改它。但它不起作用，图表没有改变符号，只保留初始渲染图表。

以下是vanilla js使用iframe视图所需的解决方法：https://plnkr.co/edit/El3so2RCDWXG6aIeEKP1?p=preview

这是我目前的代码：

组件：

export class Component 1 implements OnInit, AfterViewInit {
  pairs = [
    { symbol: 'BTCUSD', text: 'BTC/USD'},
    { symbol: 'ETHUSD', text: 'ETH/USD'}
  ];

  selectPair() {
    for (const i of this.pairs) {
      i.symbol = this.symbolPair;
    }
    console.log(this.symbolPair);
  }

  ngAfterViewInit() {
    // tslint:disable-next-line:no-unused-expression
    const tradingView = new TradingView.widget({
      'container_id': 'technical-analysis',
      'autosize': true,
      'symbol': this.symbolPair,
      'interval': 'D',
      'timezone': 'exchange',
      'theme': 'Dark',
      'style': '1',
      'toolbar_bg': '#f1f3f6',
      'withdateranges': true,
      'hide_side_toolbar': false,
      'allow_symbol_change': true,
      'save_image': false,
      'hideideas': true,
      'studies': [ 
      'MASimple@tv-basicstudies' ],
      'show_popup_button': true,
      'popup_width': '1000',
      'popup_height': '650'
    });
  }
}

查看：

<select class="form-control" [(ngModel)]="symbolPair" (ngModelChange)="selectPair()">
    <option *ngFor="let pair of pairs" [ngValue]="pair.symbol">{{pair.text}}</option>
</select>
<div id="technical-analysis" style="height: 250px"></div>

Angular 5动态嵌入TradingView小部件

0 个答案: