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

Question

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

我遇到了 Parse 语法错误。我是否可以通过 ngFor 动态地将值传递给 @input 装饰器，并使用 angular 表达式动态地作为 [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

任何帮助都会很棒。

Answer 1

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

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

Answer 2

这终于对我有用

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

没有{{}}.

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

Angular2 Pass attribute value dynamically from html template as @input

angular2-directives

angular2-template

angular