2017-08-12 56 views
0

我想從服務器端使用角度2應用程序通過發送HTML內容到服務器使用ElementRef創建PDF但它只發送HTML部分不是角度綁定part.I還想在我的HTML內容中添加CSS部分。因此,我想知道ElementRef是最好的方法,或者我應該嘗試其他任何方法。發送Html內容到服務器創建PDF Angular 2

Component.ts

import { AfterContentInit, Component, ElementRef } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <table> 
    <thead> 
    <tr> 
     <th>username</th> 
     <th>email</th> 
     <th>name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let data of data"> 
     <td>{{ data.username }}</td> 
     <td>{{ data.email }}</td> 
     <td>{{ data.first_name }}</td> 
    </tr> 
    </tbody> 
    </table>` 
}) 

export class AppComponent implements AfterContentInit { 
    node: string; 

    data = [ 
    { 
     "id": 11, 
     "username": "abc", 
     "email": "[email protected]", 
     "first_name": "ramesh" 

    }, 
    { 
     "id": 13, 
     "username": "btest", 
     "email": "[email protected]", 
     "first_name": "btest" 

    }, 
    { 
     "id": 14, 
     "username": "abcd", 
     "email": "[email protected]", 
     "first_name": "abcd" 

    }, 
    { 
     "id": 15, 
     "username": "demotest", 
     "email": "[email protected]", 
     "first_name": "demotest", 
     "last_name": "demo" 

    } 
    ] 

    constructor(private elementRef: ElementRef) { } 

    ngAfterContentInit() { 
    this.node = this.elementRef.nativeElement.innerHTML; 
    } 

} 

只發送以下數據:

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>username</th> 
     <th>email</th> 
     <th>name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!--template bindings={}--> 
    </tbody> 
    </table> 

而且我想給喜歡

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>username</th> 
     <th>email</th> 
     <th>name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!--template bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object]" 
}--><tr> 
     <td>abc</td> 
     <td>[email protected]</td> 
     <td>ramesh</td> 
    </tr><tr> 
     <td>btest</td> 
     <td>[email protected]</td> 
     <td>btest</td> 
    </tr><tr> 
     <td>abcd</td> 
     <td>[email protected]</td> 
     <td>abcd</td> 
    </tr><tr> 
     <td>demotest</td> 
     <td>[email protected]</td> 
     <td>demotest</td> 
    </tr> 
    </tbody> 
    </table> 
+0

https://stackoverflow.com/a/778897/4099454 – Hitmands

回答

1

你用錯了鉤。您需要等待視圖進行初始化。那時您的*ngFor將被解決,並且正確的內容將被放置在視圖中。

ngAfterViewInit() { 
    this.node = this.elementRef.nativeElement.innerHTML; 
} 
+0

其作品謝謝 – user6751153