javascript - Angular 2.0 ng-for 不显示 html 标签内的值

Question

我正在使用 Angular 2.0 开发的一个小型应用程序的页脚中构建动态链接。所以，我有这样的页脚组件:

// the main footer object ..
function FooterComponent() {

    // define the links in the footer ..
    this.footerLinks = [
        {
            'iconName': 'users',
            'title': 'Friends'
        },
        {
            'iconName': 'list-bullet',
            'title': 'List'
        },
        {
            'iconName': 'cog',
            'title': 'Settings'
        }
    ];
}
FooterComponent.annotations = [
    new angular.ComponentAnnotation({
        selector: 'fly-footer'
    }),
    new angular.ViewAnnotation({
        directives: [angular.NgFor],
        templateUrl: 'templates/footer.html'
    })
];

并且在我看来，到目前为止我已经尝试过这些变体:

<div *ng-for="#footerLink of footerLinks">
    <a href="javascript:;" class="footer-link demo-icon icon-{{footerLink.iconName}}">{{footerLink.title}}</a>
</div>

和

<a href="javascript:;" *ng-for="#footerLink of footerLinks" class="footer-link demo-icon icon-{{footerLink.iconName}}">{{footerLink.title}}</a>

结果是，它们中的图标名称都没有呈现。相反，我看到(对于链接的类别):

class="footer-link demo-icon icon-{{footerLink.iconName}} ng-binding"

标题按预期显示。

我错过了什么？如有任何帮助，我们将不胜感激:)

Answer 1

那是因为

class="footer-link demo-icon icon-{{footerLink.iconName}}"

是一个原始字符串，而您希望它表现得像一个表达式。

你想这样做

class="footer-link demo-icon" [class]="'icon-'+footerLink.iconName"

查看此plnkr .

PS:我根本不建议您坚持使用旧版本。该文档已经过时(不断更新，但仍然过时)，并且新的 alpha 版本不断变化(有很多重大更改)。您应该始终坚持使用最后一个 alpha 版本，直到发布稳定版本。