Angular2 组件未将属性绑定到 DOM答案

【问题标题】：Angular2 components not binding the property to DOMAngular2 组件未将属性绑定到 DOM
【发布时间】：2016-10-22 09:20:31
【问题描述】：

我正在使用 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

谢谢。

【问题讨论】：

您是否将这些变量定义为 tweet.component 中的输入？

标签： angular angular2-template

【解决方案1】：

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

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

或者：

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

【讨论】：

【解决方案2】：

你没有在你的 app.component.ts 文件中定义 randomName 等，这就是为什么浏览器没有显示任何以这种方式绑定的东西

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

【讨论】：