Javascript 使用Angular在HTML上编写元素Ref

嘿，伙计们，我正试图在屏幕上输出一块html代码，但我做不到

基本上我使用的是

@ViewChild（'preview'，{static:false}）preview:ElementRef

获取特定div的html代码

我正在构建一个签名生成器，我需要在屏幕上输出HTML代码。但是，当我尝试在屏幕上打印时，我得到：

[对象HtmlLevel]

在console.log上工作得很好。我错过了什么

谢谢

---

HTML

<div class="preview" #preview>
  <p style="margin: 0"><b>{{ name.value }}</b></p>
  <p style="margin: 0">{{ jobtitle.value }}</p>
  <p style="margin: 0" *ngIf="localnumber.value !== ''">Telephone: {{ localnumber.value }} x {{ ext.value }}</p>
  <p style="margin: 0" *ngIf="email.value !== ''">{{ email.value }}</p>
  <br>
  <br>
  <p style="font-size: 13px; color: #a0a0a0;"><b>CONFIDENTIALITY NOTICE</b></p>
  <p style="font-size: 13px; color: #a0a0a0;">This email contains confidential information intended for a specific individual and purpose. This confidential
    information is protected by law. If you have received this confidential information in error, you are hereby
    notified that any disclosure, duplication, copying, distribution or action taken based on this confidential
    information is strictly prohibited. Please delete your record of this email and notify us immediately. Thank
    you.</p>
</div>

---

粘贴你的html代码。当然。我已经编辑过了。谢谢你在哪里调用getCode（）方法？我刚刚添加了一个按钮。一旦用户填写完表单，它将调用getCode（），尝试这个控制台语句console.log（this.preview.nativeElement.innerHTML）；

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('preview', {static: false}) preview: ElementRef;
  constructor(public dialog: MatDialog) {}

  htmlCode;

  getCode() {
    console.log(this.preview.nativeElement);
    this.htmlCode = this.preview.nativeElement;
  }
}