Javascript Meteor聊天盒html以字符串形式存在_Javascript_Html_Angular_Typescript_Meteor

Javascript Meteor聊天盒html以字符串形式存在

javascript html angular typescript meteor

Javascript Meteor聊天盒html以字符串形式存在,javascript,html,angular,typescript,meteor,Javascript,Html,Angular,Typescript,Meteor,我在我的网络应用程序中写了一个聊天框，在聊天室中的HTML帖子也没有像我预期的那样显示出来。他们是以字符串形式显示的，我希望HTML在聊天中呈现。不知道为什么它们是字符串形式，我根本没有过滤字符串。如何获得要呈现的HTML HTML: <div *ngFor="let x of serverObj.values"> <div *ngFor="let y of x.shouts"> <p> <span style="fo

我在我的网络应用程序中写了一个聊天框，在聊天室中的HTML帖子也没有像我预期的那样显示出来。他们是以字符串形式显示的，我希望HTML在聊天中呈现。不知道为什么它们是字符串形式，我根本没有过滤字符串。如何获得要呈现的HTML

HTML:

<div *ngFor="let x of serverObj.values">
   <div *ngFor="let y of x.shouts">
      <p>
         <span style="font-family: initial; font-size: x-small; font-
           weight: bold;">{{y.shoutTime}}</span>
          <span style="font-size: small; font-weight: bold;">{{y.shoutUser}}</span>
            <span>: {{y.shoutContent}}</span>
          </p>
   </div>
</div>
<form name="shoutbox">
          <textarea 
            style="color: black;"
            id="shoutbox_input"
            #textArea
            (keyup.enter)="serverObj.addShout(displayName(), textArea.value)"
            (keyup.enter)="textArea.value = ''"
            ></textarea>
          <p><button id="shout_submit_button" type="button" (click)="serverObj.addShout(displayName(), textArea.value)">Sumbit</button></p>
</form>

shouts: [{
    shoutUser: string;
    shoutContent: string;
    shoutTime: Date;
}];

public addShout(user: string, content: string): void{
    //setting the proper time
    function addZero(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
    }
    function nonMilitary(j){
      return ((j + 11) % 12 + 1);
    }
    function amPM(k){
      if(k >= 12){
        return "PM";
      }
     else return "AM";
    }
    let date = new Date();
    let hours = date.getHours();
    let time = "(" + addZero(nonMilitary(hours)) + ":" + 
     addZero(date.getMinutes()) + " " + amPM(hours) + ")";

    //TODO add id calling variable to hold the current day.
    let day = ServerData.findOne({id: "Mark"});
    ServerData.update(day._id, { $push: { shouts: { shoutUser: user, 
        shoutContent: content, shoutTime: time }}});
}

 (11:58 AM) PizzaLord : <img src="https://www.shabboshouse.org/wp-
 content/uploads/2015/11/rocks2.jpg"/>

 (12:03 PM) PizzaLord : shout

 (12:08 PM) PizzaLord : <a href="www.google.com">Google.com website</a>

服务器类（在该类中会向数据库中添加呼喊）：

<div *ngFor="let x of serverObj.values">
   <div *ngFor="let y of x.shouts">
      <p>
         <span style="font-family: initial; font-size: x-small; font-
           weight: bold;">{{y.shoutTime}}</span>
          <span style="font-size: small; font-weight: bold;">{{y.shoutUser}}</span>
            <span>: {{y.shoutContent}}</span>
          </p>
   </div>
</div>
<form name="shoutbox">
          <textarea 
            style="color: black;"
            id="shoutbox_input"
            #textArea
            (keyup.enter)="serverObj.addShout(displayName(), textArea.value)"
            (keyup.enter)="textArea.value = ''"
            ></textarea>
          <p><button id="shout_submit_button" type="button" (click)="serverObj.addShout(displayName(), textArea.value)">Sumbit</button></p>
</form>

shouts: [{
    shoutUser: string;
    shoutContent: string;
    shoutTime: Date;
}];

public addShout(user: string, content: string): void{
    //setting the proper time
    function addZero(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
    }
    function nonMilitary(j){
      return ((j + 11) % 12 + 1);
    }
    function amPM(k){
      if(k >= 12){
        return "PM";
      }
     else return "AM";
    }
    let date = new Date();
    let hours = date.getHours();
    let time = "(" + addZero(nonMilitary(hours)) + ":" + 
     addZero(date.getMinutes()) + " " + amPM(hours) + ")";

    //TODO add id calling variable to hold the current day.
    let day = ServerData.findOne({id: "Mark"});
    ServerData.update(day._id, { $push: { shouts: { shoutUser: user, 
        shoutContent: content, shoutTime: time }}});
}

 (11:58 AM) PizzaLord : <img src="https://www.shabboshouse.org/wp-
 content/uploads/2015/11/rocks2.jpg"/>

 (12:03 PM) PizzaLord : shout

 (12:08 PM) PizzaLord : <a href="www.google.com">Google.com website</a>

public addShout（用户：字符串，内容：字符串）：void{
//设定适当的时间
函数addZero（i）{
如果（i<10）{
i=“0”+i；
}
返回i；
}
非军事职能（j）{
回报率（（j+11）%12+1）；
}
函数amPM（k）{
如果（k>=12）{
返回“PM”；
}
否则返回“AM”；
}
让日期=新日期（）；
让hours=date.getHours（）；
let time=“（“+addZero（非军事（小时））+”：“+
addZero（date.getMinutes（））+“”+amPM（hours）+“”；
//TODO添加id调用变量以保存当前日期。
let day=ServerData.findOne（{id:“Mark”}）；
update（day.\u id，{$push:{shouts:{shoutUser:user，
shoutContent:content，shoutTime:time}）；
}

聊天输出：

<div *ngFor="let x of serverObj.values">
   <div *ngFor="let y of x.shouts">
      <p>
         <span style="font-family: initial; font-size: x-small; font-
           weight: bold;">{{y.shoutTime}}</span>
          <span style="font-size: small; font-weight: bold;">{{y.shoutUser}}</span>
            <span>: {{y.shoutContent}}</span>
          </p>
   </div>
</div>
<form name="shoutbox">
          <textarea 
            style="color: black;"
            id="shoutbox_input"
            #textArea
            (keyup.enter)="serverObj.addShout(displayName(), textArea.value)"
            (keyup.enter)="textArea.value = ''"
            ></textarea>
          <p><button id="shout_submit_button" type="button" (click)="serverObj.addShout(displayName(), textArea.value)">Sumbit</button></p>
</form>

shouts: [{
    shoutUser: string;
    shoutContent: string;
    shoutTime: Date;
}];

public addShout(user: string, content: string): void{
    //setting the proper time
    function addZero(i) {
      if (i < 10) {
          i = "0" + i;
      }
      return i;
    }
    function nonMilitary(j){
      return ((j + 11) % 12 + 1);
    }
    function amPM(k){
      if(k >= 12){
        return "PM";
      }
     else return "AM";
    }
    let date = new Date();
    let hours = date.getHours();
    let time = "(" + addZero(nonMilitary(hours)) + ":" + 
     addZero(date.getMinutes()) + " " + amPM(hours) + ")";

    //TODO add id calling variable to hold the current day.
    let day = ServerData.findOne({id: "Mark"});
    ServerData.update(day._id, { $push: { shouts: { shoutUser: user, 
        shoutContent: content, shoutTime: time }}});
}

 (11:58 AM) PizzaLord : <img src="https://www.shabboshouse.org/wp-
 content/uploads/2015/11/rocks2.jpg"/>

 (12:03 PM) PizzaLord : shout

 (12:08 PM) PizzaLord : <a href="www.google.com">Google.com website</a>

（上午11:58）比萨领主：
（下午12:03）比萨领主：喊
（下午12:08）比萨领主：

感谢您的帮助。

如中所述，插值会导致内容转义，HTML标记显示为纯文本

代替使用插值：

<span>: {{y.shoutContent}}</span>

哦，太好了，那很好用。我不知道角度插值的这个性质。