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

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

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

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

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>

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励