Angular2从html模板动态传递属性值作为@input答案

【问题标题】：Angular2 Pass attribute value dynamically from html template as @inputAngular2从html模板动态传递属性值作为@input
【发布时间】：2016-09-24 05:54:50
【问题描述】：

如何在 [email] 属性中传递动态值而不是字符串？？

我遇到了 Parse 语法错误。我是否可以通过 ngFor 动态地将值传递给 @input 装饰器，并使用角度表达式动态地在 [email] 属性中传递值，即 {{member.email}} 如果可以，请帮助我在 html 上使用这种语法。

注意：像 [email]="'XXX@XX.com'" 这样的静态输入可以很好地获取我的数据

EXCEPTION: Template parse errors:
Parser Error: Missing expected : at column 8 in [{{member.email}}] in AppComponent@56:49 ("class="avatar" *ngFor="let member of teamMembers">
   <li><a href=""><gravatar-image [size]="80" [ERROR ->][email]="{{member.email}}"></gravatar-image></a></li>
            </ul>
            </div>
"): AppComponent@56:49

HTML 模板代码：

<div class="row">
    <div class="col-md-12">
        <h4>Team Members</h4>
        <ul class="avatar" *ngFor="let member of teamMembers">
        <li><a href=""><gravatar-image [size]="80" 
          [email]={{member.email}}></gravatar-image></a></li> //Here i get error 
                               I am not able to assign input value dynamically by 
                               getting "member.email" value through expression. 

        </ul>
        </div>
        </div>

指令组件输入：

@Component({
selector: 'gravatar-image',
template: '<img [src]="getGravatarImage()">',
styles: ['img{width: 40px;height: 40px;margin: 10px;overflow: hidden;float: left;display: inline-block;border-radius: 100%;}']
})
export class GravatarImageComponent {
@Input() size:number = 80;
@Input() email:string = "";

getGravatarImage():string {
    return 'http://www.gravatar.com/avatar/' + md5(this.email) + '?s=' + this.size;
}
}

应用组件：

import { Component, OnInit, Input } from 'angular2/core';
import { Observable }     from 'rxjs/Rx';
import { Location, LocationStrategy } from 'angular2/platform/common';
import { GravatarImageComponent } from './gravatar-image.component';
import { UserService } from './user.service';
import { User } from './user';

@Component({
  selector: 'editor',
  templateUrl:'../template/XXX.html',
  providers: [UserService],
  directives: [GravatarImageComponent]
})
export class AppComponent implements OnInit {
  teamMembers: User[];
  .....etc

任何帮助都会很棒。

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案1】：

您不需要使用双花括号，只需使用引号即可。

<gravatar-image size="80" [email]="member.email"></gravatar-image>

【讨论】：

在检查 html 时仍然出错我得到
try : 不需要使用括号来传递大小，因为size 不是您需要用于电子邮件的属性。
我试过这种方式不起作用......并尝试了 "member.email","'member.email'",[{member.email}], {{member.email}}, { member.email},'member.email'
@msfdz 与“member.email”配合得很好，谢谢.. Cookies 是我的问题，清除后它工作顺利

【解决方案2】：

这终于对我有用了

 <gravatar-image [size]="80" [email]=member.email>

没有{{}}。

【讨论】：