Angular2 组件未将属性绑定到 DOM

Question

我在玩Angular2学习。

我写了一个推文组件，我试图在其中显示随机图片、文本和喜欢的内容。像这样：

tweet.component.html

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="http://lorempixel.com/100/100/people?1" alt="">    
    </a>
  </div>
  <div class="media-body">
    <span>{{nameOfThePerson}}</span>
    <span> {{tweeterHandler}}</span>
    <span>{{tweetText}}</span>
    <heart [numberOfLikes]=5></heart>
  </div>
</div>

我在 app.component.html 中这样使用它：

     <div>
         <tweet
            [nameOfThePerson]="randomName"
            [tweeterHandler]="handler1"
            [tweetText]="firstText">
         </tweet>
     </div>

在浏览器上，我只是得到随机图像和喜欢的数量，而不是文本、人名和推特处理程序。

请告诉我我在这里遗漏了什么？

完整代码在这里：

https://github.com/tsingh38/Angular2

谢谢。

Answer 1

您没有在 app.component.ts 文件中定义 randomName 等，这就是为什么浏览器不显示以这种方式绑定的任何内容的原因

<tweet nameOfThePerson="randomName"
        tweeterHandler="handler1"
        tweetText="firstText"></tweet>

Answer 2

我的猜测是您想将 randomName、handler1 和 firstText 作为字符串值传递给 tweet 的属性，但是您在做什么现在正在传递具有这些名称的变量作为值，问题是它们不存在。如果您想将 randomName、handler 和 firstText 作为字符串值传递给模板中 tweet 的属性，有两种方法可以做到这一点：

<tweet
    nameOfThePerson="randomName"
    tweeterHandler="handler1"
    tweetText="firstText">
</tweet>

或：

<tweet
    [nameOfThePerson]="'randomName'"
    [tweeterHandler]="'handler1'"
    [tweetText]="'firstText'">
</tweet>

Angular2 组件未将属性绑定到 DOM

Angular2 components not binding the property to DOM

angular2-template

angular

Angular2 组件未将 属性 绑定到 DOM

Angular2 components not binding the property to DOM

angular2-template

angular

Angular2 组件未将属性绑定到 DOM