将 HTML 内容发送到服务器以创建 PDF Angular 2

Question

我正在尝试使用 ElementRef 将 HTML 内容发送到服务器，从而使用 angular 2 应用程序从服务器端创建 pdf，但它只发送 HTML 部分而不是角度绑定部分。我还想在我的HTML内容中添加CSS部分。所以我想知道ElementRef是最好的方法，或者我应该尝试其他方法。

组件.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": "[e-mail]",
"first_name": "ramesh"
},
{
"id": 13,
"username": "btest",
"email": "[e-mail]",
"first_name": "btest"
},
{
"id": 14,
"username": "abcd",
"email": "[e-mail]",
"first_name": "abcd"
},
{
"id": 15,
"username": "demotest",
"email": "[e-mail]",
"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>[e-mail]</td>
<td>ramesh</td>
</tr><tr>
<td>btest</td>
<td>[e-mail]</td>
<td>btest</td>
</tr><tr>
<td>abcd</td>
<td>[e-mail]</td>
<td>abcd</td>
</tr><tr>
<td>demotest</td>
<td>[e-mail]</td>
<td>demotest</td>
</tr>
</tbody>
</table>

Answer 1

你用错了钩子。您需要等待视图初始化。届时将解析您的*ngFor，并将适当的内容放置在视图中。

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