Angular:this.div.nativeElement 发送到 API 后为空

Question

我检索了一个 div 的 html，以便将它发送到我的 API，就像这样:

  @ViewChild('box-list') div: ElementRef;

GetContainerText() {
    const html = this.div.nativeElement;
    this.sendingHTMLService
    .sendHTML(
      html
    )
    .subscribe(response => {
      if (response.success) {
          console.log(successfully');
      }
    });
  }

当我控制台记录检索到的 HTML 时，我得到了我想要的:

但在我的 api 中我得到一个空对象，expression $body 具有 value {"html":{}}

这是我的服务:

  sendHTML(html: any) {
    console.log(html);
    return this.http.post<any>(
      '/api/sendHTML',
      { html},
      this.httpOptions
    );
  }

当我尝试从 postman 发送 html 代码时，我在我的 $body 中得到了想要的结果，我在 postman 中发送了这样的正文请求:

{
  "html": '<div _ngcontent-hab-c1="" class="box" style="max-width: 800px; ...'
}

一旦我尝试做同样的事情并将检索到的 html 发送到我在两个 '' 之间的 API，就像这样:

  sendHTML(html: any) {
    console.log(html);
    return this.http.post<any>(
      '/api/sendHTML',
      { html: '' + html + ''},
      this.httpOptions
    );
  }

我不再得到一个空对象，但我得到:

{"html":"[object HTMLDivElement]"}

Answer 1

您可能希望获取元素的 HTML 代码。

如果是这种情况，那么您需要获取元素的 outerHTML 属性。