将数组项作为参数传递给角度模板中的函数

Question

在我的Angular2应用程序中，我大致有这个app.component.ts：

...
export class AppComponent {
    // themes array
    readonly themes = ['assets/default-theme.css', 'assets/test-theme.css', ...];

    // theme setter
    setTheme(href: string) {
        setThemeLinkHref(href);
        console.log('Theme has been changed to: ' + href);
    }
    ...
}

我在模板中有这个代码（app.component.html）：

...
<button (click)="setTheme(themes[0])">Default</button>
...

这样我就得到了未定义＆＃39;日志中主题的href：

Theme has been changed to: undefined

如何传递某个数组的项目作为参数？

Answer 1

如果没有重复代码，您可以使用 ngFor ，如下所示，

 <button mat-menu-item  *ngFor="let theme of themes" (click)="setTheme(theme)"> {{theme.name}}</button>

如果没有 readonly 访问者，

也会更改您的主题数组

themes = [ {'theme':'assets/default-theme.css','name':'Default', {'theme':'assets/test-theme.css','name':'Test'}];

Answer 2

摆脱readonly修饰符，它似乎有效。