如何在Angular 6中使用变量动态生成输出任务的HTML?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (8210)

当我运行这段代码时,我没有得到值,而是得到了对象名。

export class PrescriberComponent implements OnInit {
constructor() { }

people = [
    {id: 1, forename: 'John', surname: 'Doe'},
    {id: 2, forename: 'John', surname: 'Smith'},
    {id: 3, forename: 'Peter', surname: 'Scott'},
    {id: 4, forename: 'Sue', surname: 'Reece'}
];

PrintDoc1() : void {  
    var originalContents = ` 
    <table border="3" width="50%" cellpadding="2" cellspacing="3">
    <tr>
        <th colspan="2">
            <h2>table title</h2>
        </th>
    </tr>
    <tr>
        <th>First Name</th>
    </tr>
    <tr *ngFor="person in this.people">
        <td>{{person.forename}}</td>
    </tr>
    </table>
    `;  
    console.log(originalContents);
     var popupWin = window.open('', '_blank', 'width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=center,status=no,titlebar=no');
     popupWin.window.focus();
     popupWin.document.write('<!DOCTYPE html><html><head>' +
         '<link rel="stylesheet" type="text/css" href="style.css" />' +
         '</head><body onload="window.print()"><div class="reward-body">' + originalContents + '</div></html>');
    popupWin.document.close();
}

}



<button type="button" style="color: #ffffff;background-color: #28afde" (click)="PrintDoc1()">PRINT</button>

在输出中,我只能看到对象名,而不是值。*ngf和插值不是这样工作的。

提问于
用户回答回答于

尝试使用ngfor,像这样尝试一下

<li *ngFor="let person of people">
  {{ person.forename}}
</li>

热门问答

腾讯会议共享屏幕,其他人收到的是黑屏?

腾讯云音视频 支持 移动端h5吗( 不是小程序的)?

shixin

腾讯 · 高级产品经理 (已认证)

推荐

实时音视频TRTC的Web版是基于WebRTC的方案,需要浏览器的对WebRTC的支持,支持WebRTC的浏览器就可以。但是,移动端浏览器对WebRTC支持的情况并不好,建议使用小程序版。

如何用命令修改腾讯云解析目标ip?

氧化先生道可道 非常道 名可名 非常名
推荐
可以,参考: https://cns.api.qcloud.com/v2/index.php? &<公共请求参数> &Action=RecordCreate &domain=qcloud.com &subDomain=www &recordType=A &recordLine=默...... 展开详请

腾讯云IoT物联平台中如何自定义Topic?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐已采纳
第二个是物联网通信平台(IoT Hub)的,https://cloud.tencent.com/document/product/634/32546。目前物联网开发平台(IoT explorer)只支持基于数据模板协议的接入(文档 https://cloud.tencent.co...... 展开详请

组队匹配完整流程是怎样的?感觉缺少API支持?

您好,matchgroup匹配成功后,小组成员会进入同一个房间和同一个队伍,这个API需要传玩家ID,通过邀请好友进房间就能拿到玩家的id,解散房间后再调用matchgroup,在没有解散房间不能调用matchGroup 接口。

SCF使用了k8s或docker容器技术吗?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐

SCF的新架构使用的轻量化虚拟机技术,同时MVM里内嵌的有docker,但是没有使用K8S

所属标签

扫码关注云+社区

领取腾讯云代金券