Fatal编程技术网
  • javascript/
  • Javascript 如何在电子邮件中使用由变量组成的背景色发送元素

Javascript 如何在电子邮件中使用由变量组成的背景色发送元素

javascript html css angular

Javascript 如何在电子邮件中使用由变量组成的背景色发送元素,javascript,html,css,angular,Javascript,Html,Css,Angular,我正在尝试发送一封包含我的组件中的元素的电子邮件 元素从角度发送到c，在c中发送到客户 要素是： 打印出来没问题，但发送电子邮件时我会收到以下信息： 通过以下代码进行发送： 内容： this.customerService.sendMail(this.address,message).subscribe( data=>{ this.alert="Email sent successfully"; }, fail=> {

我正在尝试发送一封包含我的组件中的元素的电子邮件

元素从角度发送到c，在c中发送到客户

要素是：

打印出来没问题，但发送电子邮件时我会收到以下信息：

通过以下代码进行发送：

内容：

 this.customerService.sendMail(this.address,message).subscribe(
    data=>{
       this.alert="Email sent successfully";
    },
    fail=> {
       this.alert="Sorry, There is a problem with send email";
    });
html

<div id="print-section" >
<div>
    <h1 >your makeup:</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span id="color"></span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label >company name: </label><span>{{product.company.name}}</span><br/>
    <h2 >thank you and have a good day!</h2>
    <br/>
</div>

<div id="print-section" >
<div>
    <h1>your makeup</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span name="color" id="color" [style]="myStyle">color</span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label>company name: </label><span>{{product.company.name}}</span><br/>
    <h2>thank you and have a good day</h2>
</div>
您能帮助我吗？

我更改了样式在元素中的放置方式： 我在
html
中使用with
[style]
，而不是
ts
中的：
d.setAttribute

整个代码：

html

<div id="print-section" >
<div>
    <h1 >your makeup:</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span id="color"></span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label >company name: </label><span>{{product.company.name}}</span><br/>
    <h2 >thank you and have a good day!</h2>
    <br/>
</div>

<div id="print-section" >
<div>
    <h1>your makeup</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span name="color" id="color" [style]="myStyle">color</span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label>company name: </label><span>{{product.company.name}}</span><br/>
    <h2>thank you and have a good day</h2>
</div>
//发送到服务器

let printContents;
printContents = document.getElementById('print-section').innerHTML;
let message:string=`
<html>
  <head>
    <title>Email tab</title>
  </head>
  <body>${printContents}</body>
</html>`;
this.customerService.sendMail(this.address,message).subscribe(
  data=>{
    this.alert="Email sent successfully";
  },
  fail=> {
    this.alert="Sorry, There is a problem with send email";
  }
);

让我们打印内容；
printContents=document.getElementById（'print-section'）.innerHTML；
让消息：字符串=`
电子邮件标签
${printContents}
`;
this.customerService.sendMail（this.address，message）.subscribe(
数据=>{
this.alert=“电子邮件发送成功”；
},
失败=>{
this.alert=“对不起，发送电子邮件有问题”；
}
);
我更改了样式在元素中的放置方式： 我在
html
中使用with
[style]
，而不是
ts
中的：
d.setAttribute

整个代码：

html

<div id="print-section" >
<div>
    <h1 >your makeup:</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span id="color"></span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label >company name: </label><span>{{product.company.name}}</span><br/>
    <h2 >thank you and have a good day!</h2>
    <br/>
</div>

<div id="print-section" >
<div>
    <h1>your makeup</h1>
    <label>id: </label><span>{{product.id}}</span><br/>
    <label>codeInCompany: </label><span>{{product.codeInCompany}}</span><br/>
    <span name="color" id="color" [style]="myStyle">color</span><br>
    <span style="display:none" id='r'>{{product.r}}</span>
    <span style="display:none" id='g'>{{product.g}}</span>
    <span  style="display:none" id='b'>{{product.b}}</span>
    <label>price: </label><span>{{product.price}}</span><br/>
    <label>description: </label><span>{{product.description}}</span><br/>
    <label>company name: </label><span>{{product.company.name}}</span><br/>
    <h2>thank you and have a good day</h2>
</div>
//发送到服务器

let printContents;
printContents = document.getElementById('print-section').innerHTML;
let message:string=`
<html>
  <head>
    <title>Email tab</title>
  </head>
  <body>${printContents}</body>
</html>`;
this.customerService.sendMail(this.address,message).subscribe(
  data=>{
    this.alert="Email sent successfully";
  },
  fail=> {
    this.alert="Sorry, There is a problem with send email";
  }
);

让我们打印内容；
printContents=document.getElementById（'print-section'）.innerHTML；
让消息：字符串=`
电子邮件标签
${printContents}
`;
this.customerService.sendMail（this.address，message）.subscribe(
数据=>{
this.alert=“电子邮件发送成功”；
},
失败=>{
this.alert=“对不起，发送电子邮件有问题”；
}
);
您能做一下console.log（style1）吗？你会得到什么？@Riddhi我编辑了我问题中的ts。当我在开发环境中放置console.log（）时，我发现我没有为事件正确注册主体。我修好了。但现在我还是看不见颜色。在Gmail中收到电子邮件时，我如何才能看到console.log（）？您是否有
索引
文件或任何可以打印
消息
变量的文件？@ridhi该消息是通过电子邮件发送的。客户在Gmail中打开电子邮件。我怎样才能在Gmail中看到控制台？你有没有尝试过像#000这样的静态颜色，或者我发现
RGB值并没有好多少，导致了一些可爱的绿色阴影（尽管为白色和灰色指定了值）：
来自can you please do console.log（style1）？你会得到什么？@Riddhi我编辑了我问题中的ts。当我在开发环境中放置console.log（）时，我发现我没有为事件正确注册主体。我修好了。但现在我还是看不见颜色。在Gmail中收到电子邮件时，我如何才能看到console.log（）？您是否有
索引
文件或任何可以打印
消息
变量的文件？@ridhi该消息是通过电子邮件发送的。客户在Gmail中打开电子邮件。我怎么能在Gmail中看到控制台？你有没有尝试过像#000这样的静态颜色，或者我发现
RGB值并没有好多少，导致了一些可爱的绿色阴影（尽管为白色和灰色指定了值）：