小编Sri*_*kar的帖子

使用d3 js时Renderer2不会渲染SVG元素-Angular 4

通过以下链接后

在Angular 2中使用D3.js

我知道我们不应该直接操纵DOM。因此,我开始探索使用角度4的Renderer2。

因此,我开始编写一些代码以将svg添加到DOM。以下是我的代码片段。

HTML代码

<div class="row">
 <div class="col-12">
   <div #myBarGraph id="host"></div>
 </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Component.ts

export class BarGraphComponent implements OnInit {
 host:any;
 svg:any;
 @ViewChild('myBarGraph') myBarGraph:ElementRef;

 constructor(private renderer:Renderer2) { }

 ngOnInit() {
  //some logic
 }

 // called on some drop down selection
 teamSelection(){
  //some logic
   this.host = this.mybarGraph.nativeElement;
   buildSVG();
 }

 buildSVG():void {
   this.svg = this.renderer.createElement('svg');
   this.renderer.setAttribute(this.svg,'width','600');
   this.renderer.setAttribute(this.svg,'height','400');
   this.renderer.setAttribute(this.svg,'background-color','blue');
   this.renderer.appendChild(this.host,this.svg); 
 }
}
Run Code Online (Sandbox Code Playgroud)

上面的代码能够将svg元素添加到DOM。但是令我惊讶的是,它实际上没有显示svg元素!。

我确实提到了以下问题

  1. Angular2 Renderer:Svg rect已渲染,但未显示在页面中
  2. Angular2无法在运行时呈现SVG

但到目前为止,我找不到合适的答案。

下面是问题的屏幕截图 问题

如上所示,svg存在于DOM中,但未显示在网页中。任何帮助将非常感激。

javascript svg d3.js angular

3
推荐指数
1
解决办法
1333
查看次数

当使用ng2-smart表的回调'onComponentInitFunction'函数时,Angular 4,'this'未定义

我在我的组件中使用ng2-smart-table.

我试图调用父组件的approveTheOrder()方法,但我无法获取父类的对象

以下是片段

{
  title: "Actions",
  type: "custom",
  renderComponent: ActionRenderComponent,
  onComponentInitFunction(instance) {
    instance.actionEmitter.subscribe(row => {
      if(row == CONSTANT.STATUS_APPROVE){
        //here 'row' value is from childComponent-ActionRenderComponent,which I am able to get easily in parentComponet 
       this.approveTheOrder(instance.rowData.id); // here this is undefined, 

      }
      if(row == CONSTANT.STATUS_REJECT){
        this.rejectOrder();//this is undefined
      }
      if(row == CONSTANT.STATUS_PENDING){
        this.pendingOrder(); // this is undefined
      }
    });
  },

  filter: false
};
Run Code Online (Sandbox Code Playgroud)

有没有人知道如何在下面的onComponentInitFunction()中获得'this'?

下面是我得到的错误的图像.在此输入图像描述

此外,我试图使用'绑定'功能未能成功实现目标,任何人都可以在这里指导我,我真的卡在这一点.

编辑1 请注意,我能够从中获取事件ChildComponent为父级,但这里的问题是特定于NG2智能表的组成部分.

要从ChildComponent获取值,我正在尝试使用ng2-smart-table组件的onComponentInitFunction(instance)的内置回调函数

ng2-smart-table angular

2
推荐指数
1
解决办法
2492
查看次数

标签 统计

angular ×2

d3.js ×1

javascript ×1

ng2-smart-table ×1

svg ×1