Question

我有一个角度4应用程序，我有一个功能来打印内容。这是我的ts文件的一部分：

print(id) {
// console.log(temp)
this.templateservice.getTemplateById(id).subscribe(template => {
  if (!template.success) {
    this.snackbar.open(template.message, '', {
      duration: 2000,
      extraClasses: ['success-snackbar']
    });
  } else {
    let headContents, innerContents, signContents, popupWin;
    headContents = document.getElementById('head-section').innerHTML;
    innerContents = document.getElementById('inner-section').innerHTML;
    signContents = document.getElementById('sign-section').innerHTML;

    console.log(headContents);
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    console.log(popupWin)
    popupWin.document.open();
    popupWin.document.write('<html><head><style></style></head><body onload="window.print();window.close()"><p class="head">' + headContents + '</p> <p class="inner">' + innerContents + '</p> <p class="sign">' + signContents + '</p></body></html>');
    popupWin.document.close();
  }
});// end of subscribe
}//end of print

这是我的html文件：

<md-tab>
          <ng-template md-tab-label>Outgoing Mail</ng-template>
          <md-card-content >
            <div fxLayout="column" fxLayoutAlign="center center" class="mt-1" >
              <div class="template" style="@page  {size: A4};width: 210mm;height: 297mm;border-width: 2px;border-style: solid;border-color: #e6e6e6;padding-top: 23mm;padding-left: 2cm;padding-right: 2.5cm;padding-bottom: 55mm">
                <p class="head" id="head-section" style="line-height: 1cm;padding-left: 152mm;">Mail Number: {{mail_number}} <br> Date: {{created_at| date:'yyyy MMM dd'}}</p>
                <p class="inner" id="inner-section" style="max-height: 873px;line-height: 25px;word-spacing:1px;text-align: justify;padding-right: 20mm;padding-left: 25mm;padding-top: 21mm;padding-bottom: 5mm;white-space: pre-wrap; width: 166mm; word-wrap: break-word;">{{content}}</p>
                <p class="sign" id="sign-section" style="padding-left: 33mm;padding-right: 147mm ;padding-bottom: 70mm;line-height: 1cm;">Sincerely <br> {{sender}}</p>
              </div>
            </div>
          </md-card-content>
        </md-tab>

在这种情况下，我得到一个错误“无法读取未定义的属性文档”，如果我把打印代码从订阅中删除，我无法访问服务返回的模板！当我写console.log(headContents)时，我得到回应。但当我console.log(popupwin)时，我得到的图像低于标准！ popupwin为null，我有关于文档的错误

Answer 1

getTemplateById是异步的。它是未定义的，因为您在解析observable之前进行了记录。在订阅中做你的东西。

data;

print(id) {
    this.templateService.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
        } else {
            this.data = temp;
            console.log(this.data);

            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    }
}

Answer 2

this.templateService.getTemplateById(id).subscribe(temp => {
    if (!temp.success) {
        // err
    } else {
        this.data = temp;
    }
});
console.log(this.data);

您只能在此处获取范围的this.data   问题是你不会在代码之后得到它，

因为   getTemplateById是异步代码，因此它将在一段时间之前执行   您的控制台日志将被调用。

解决方案：

print(id){
    this.templateService.getTemplateById(id).subscribe(temp => {
        if (!temp.success) {
            // err
        } else {
            console.log(this.data);
            this.data = temp;
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin = window.open('', '_blank', 'width=300,height=300');
            popupWin.document.open();
            popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>');
            popupWin.document.close();
        }
    });
}

Answer 3

将.finally（）添加到Observable，这样做：

this.templateService.getTemplateById(id)
.finally(() => {
      console.log(this.data);
})
.subscribe(temp => {
    if (!temp.success) {
      // err
    } else {
      this.data = temp;
    }
  });

如何在角度2中获得超出服务范围的值？

3 个答案: