routerLink 在 ngFor 中不工作
routerLink not working inside ngFor
三天以来我一直面临这个甜蜜的问题。让我们从制作
的单个 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可以帮助你理解
尝试创建一个方法
getRouerLink(link) {
return [link];
}
然后在你的 *ngFor 中调用它,比如 routerLink = "getRouterLink(setting.link)"
正确的语法:
[routerLink]="[setting.link]">
没有 [] 表示它是一个值,您可以使用 {{ }} 语法使其动态化,带括号表示它是一个表达式。由于您使用的是 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可以帮助你理解
尝试创建一个方法
getRouerLink(link) {
return [link];
}
然后在你的 *ngFor 中调用它,比如 routerLink = "getRouterLink(setting.link)"
正确的语法:
[routerLink]="[setting.link]">
没有 [] 表示它是一个值,您可以使用 {{ }} 语法使其动态化,带括号表示它是一个表达式。由于您使用的是 routerLink 数组语法,我假设您需要它,这意味着您需要一个表达式。