角度2：显示图像＆amp;代码/样式文本。如何？

Question

我正在尝试通过为twitter这样的应用程序创建简单的布局来开始学习Angular 2，其中我的唯一目标是创建主要的Home布局，我将其命名为“Work Space”，此应用程序使用HTML，CSS，Bootsrap和Angular 2其他库就像代码美化代码一样。 我有一些问题需要修复，这是：

1）ProfileImage div的图像没有显示在html页面中？

2）我如何在不使用某些内容的情况下发布和显示代码＆lt; for＆lt;签署...等。我怎么能这样做？

3）如果我尝试使用组件来显示内容div，因为它与所有样式init而不是直接添加到html页面，它将显示没有样式，所以我可以使用* ngFor来显示每个帖子。我该如何解决这个问题？

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl:'./app/app.component.html',
    styleUrls: ['./app/app.component.css']
})
export class AppComponent {
    title = "Work Space";
    
    isFavorite = false;
    isLike = false;

    likeClick() {
        this.isLike = !this.isLike;
    }
    favoriteClick() {
        this.isFavorite = !this.isFavorite;
    }
}

app.component.html

<div id="titleBar">{{ title }}</div>
<div id="PostShow">
    <div id="PostHeader" class="col-xs-12">
        <div id="ProfileImage" class="col-xs-1"><img src="./images/logo.png" alt="ProfileImage" style="width:60px;height:60px;"></div>
        <div id="NameTags" class="col-xs-9">
            <div id="ProfileName" class="col-xs-12"><strong>iSporty</strong></div>
            <div id="ProfileTags" class="col-xs-12">C#, AngularJS 2, Web Developer</div>
        </div>
        <div id="PostTime" class="col-xs-2"><span class="glyphicon glyphicon-time"></span> 6m</div>
    </div>
    <div id="PostContent">
        <b>Bootstrap Grid System</b>
        <p>Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.</p>
        <b>Grid Classes</b>
        <p>The Bootstrap grid system has four classes:
            <br/>
            <strong>xs</strong> for phones, <strong>sm</strong> for tablets, <strong>md</strong> for desktops, <strong>lg</strong> for larger desktops.
            <br/> The classes above can be combined to create more dynamic and flexible layouts.</p>
        <b>Basic Structure of a Bootstrap Grid</b>
        <p>The following is a basic structure of a Bootstrap grid:</p>
        <div class="panel panel-default CodePanel">
            <div class="panel-heading CodeHeadingColor">
                Bootstrap Code:
            </div>
            <div class="panel-body CodeBodyColor">
                <pre class="prettyprint">&lt;div class="row"&gt;
  &lt;div class="col-*-*"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
  &lt;div class="col-*-*"&gt;&lt;/div&gt;
  &lt;div class="col-*-*"&gt;&lt;/div&gt;
  &lt;div class="col-*-*"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
  ...
&lt;/div&gt;</pre>
            </div>
        </div>
    </div>
    <div id="PostImage">PostImage</div>
    <div id="PostFooter" class="col-xs-12">
        <div id="PostLikes" class="col-xs-1">
            <i class="fa RedColor" [class.fa-heart-o]="!isLike" [class.fa-heart]="isLike" (click)="likeClick()">
            </i> 15</div>
        <div id="PostComments" class="col-xs-1"><i class="fa fa-commenting"></i> 200</div>
        <div id="PostFavorites" class="col-xs-1">
            <span class="glyphicon YellowColor" [class.glyphicon-star-empty]="!isFavorite" [class.glyphicon-star]="isFavorite" (click)="favoriteClick()">
            </span> 5
        </div>
        <div class="col-xs-7"></div>
        <div id="PostDots" class="col-xs-2"><i class="fa fa-ellipsis-h"></i></div>
    </div>
</div>


<div id="PostShow">
    <div id="PostHeader" class="col-xs-12">
        <div id="ProfileImage" class="col-xs-1"><img src="./images/logo.png" alt="ProfileImage" style="width:60px;height:60px;"></div>
        <div id="NameTags" class="col-xs-9">
            <div id="ProfileName" class="col-xs-12"><strong>Ray DOM</strong></div>
            <div id="ProfileTags" class="col-xs-12">JavaScript, Adobe Creative Suite, App Developer</div>
        </div>
        <div id="PostTime" class="col-xs-2"><span class="glyphicon glyphicon-time"></span> 5h</div>
    </div>
    <div id="PostContent">
        <b>C# - Basic Syntax</b>
        <p>C# is an object-oriented programming language. In Object-Oriented Programming methodology, a program consists of various objects that interact with each other by means of actions. The actions that an object may take are called methods. Objects of the same kind are said to have the same type or, are said to be in the same class.</p>
        <p>For example, let us consider a Rectangle object. It has attributes such as length and width. Depending upon the design, it may need ways for accepting the values of these attributes, calculating the area, and displaying details.</p>
        <p>Let us look at implementation of a Rectangle class and discuss C# basic syntax:</p>
        <div class="panel panel-default CodePanel">
            <div class="panel-heading CodeHeadingColor">
                C# Code:
            </div>
            <div class="panel-body CodeBodyColor">
                <pre class="prettyprint">using System;
namespace RectangleApplication
{
   class Rectangle 
   {
      // member variables
      double length;
      double width;
      public void Acceptdetails()
      {
         length = 4.5;    
         width = 3.5;
      }
      
      public double GetArea()
      {
         return length * width; 
      }
      
      public void Display()
      {
         Console.WriteLine("Length: {0}", length);
         Console.WriteLine("Width: {0}", width);
         Console.WriteLine("Area: {0}", GetArea());
      }
   }
   
   class ExecuteRectangle 
   {
      static void Main(string[] args) 
      {
         Rectangle r = new Rectangle();
         r.Acceptdetails();
         r.Display();
         Console.ReadLine(); 
      }
   }
}</pre>
            </div>
        </div>
    </div>
    <div id="PostImage">PostImage</div>
    <div id="PostFooter" class="col-xs-12">
        <div id="PostLikes" class="col-xs-1">
            <i class="fa RedColor" [class.fa-heart-o]="!isLike" [class.fa-heart]="isLike" (click)="likeClick()">
            </i> 3</div>
        <div id="PostComments" class="col-xs-1"><i class="fa fa-commenting"></i> 40</div>
        <div id="PostFavorites" class="col-xs-1">
            <span class="glyphicon YellowColor" [class.glyphicon-star-empty]="!isFavorite" [class.glyphicon-star]="isFavorite" (click)="favoriteClick()">
            </span> 20
        </div>
        <div class="col-xs-7"></div>
        <div id="PostDots" class="col-xs-2"><i class="fa fa-ellipsis-h"></i></div>
    </div>
</div>

app.component.css

body {
    background-color: #1e1e1e;
}
#titleBar {
    color: #c7c7c7;
    background-color: #2d2d30;
    padding: 7px;
    text-align: center;
    border-bottom: 2px solid #007acc;
}
#PostShow {
    color: #c7c7c7;
    background-color: #1e1e1e;
    padding: 5px 0 0;
    text-align: left;
}
#PostHeader {
    padding: 5px 0 5px;
}
#ProfileImage {
    padding: 0 10px 0;
}
#ProfileName,
{
    padding: 0 0 10px 0;
}
#PostTime {
    text-align: right;
    padding: 10px 10px 0 0;
}
#PostContent {
    padding: 5px 30px 5px;
}
#PostImage {
    padding: 0 0 5px;
}
#PostFooter {
    background-color: #1e1e1e;
    padding-top: 10px;
    border-top: solid 1px #434346;
    border-bottom: 1px solid #434346;
    margin-bottom: 5px;
}
#PostLikes,
#PostComments,
#PostFavorites {
    text-align: left;
    color: #c7c7c7;
    padding: 0 0 10px 0;
}
#PostDots {
    font-size: 15px;
    text-align: right;
    padding: 3px 10px 0 0;
}
.RedColor {
    color: #DF0101;
}
.YellowColor {
    color: #D7DF01;
}
.CodePanel {
    background-color: #007acc;
    border: 2px solid #007acc;
}
.CodeHeadingColor {
    color: #fff;
    background-color: #007acc;
    border: 0px;
    padding: 5px;
}
.CodeBodyColor {
    background-color: #1d1f21;
    padding: 0 0 0;
}