routerLink在ngFor中不起作用

时间:2017-10-31 16:55:23

标签: angular angular-material routerlink

我从三天开始面对这个甜蜜的问题。让我们从正在制作的单个HTML代码开始

<mat-list-item    *ngFor="let setting of SideBarLinks"
                   [ngStyle]="{'display': setting['_value'] === true ? 'block':'none'}"   routerLink="[{{setting.link}}]">
        <mat-icon mat-list-icon>{{setting['icon']}}</mat-icon>
        {{setting.name}}
 </mat-list-item>

问题是我多少次点击它,它什么都没做。 我尝试使用链接到应用程序的独立JSON 自动化侧栏中的列表。我使用 AngularX 大约一年,我知道routerLink指令不适用于存在的每个组件。但当我将它用作单个组件(没有 * ngFor

以下image可以帮助您理解

2 个答案:

答案 0 :(得分:1)

正确的语法:

[routerLink]="[setting.link]">

没有[]意味着它是一个值,您可以使用{{}}语法使其动态化,括号表示它是一个表达式。由于您使用的是routerLink数组语法,我假设您需要它,这意味着您需要一个表达式。

答案 1 :(得分:0)

尝试创建方法

getRouerLink(link) {
  return [link];
}

然后在你的* ngFor routerLink = "getRouterLink(setting.link)"

中调用它