Question

我正在玩Angular 2进行学习。

我写了一个Tweet组件，我试图显示随机图片，文字和喜欢。像这样：

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属性，有两种方法可以执行此操作：< / p>

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

或者：

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

Angular2组件未将属性绑定到DOM

2 个答案: