来自 ngFor 项的动态 routerLink 值给出错误“在预期表达式的地方得到插值 ()”

Posted 2023-02-22

【中文标题】来自 ngFor 项的动态 routerLink 值给出错误“在预期表达式的地方得到插值 ()”

【英文标题】：Dynamic routerLink value from ngFor item giving error "Got interpolation () where expression was expected"来自 ngFor 项的动态 routerLink 值给出错误“在预期表达式的地方得到插值 ()”

【发布时间】：2016-09-01 21:18:47

【问题描述】：

我正在尝试根据组件中的一组动态项在指令中设置routerLink 值。但是 Angular2 抛出了一个错误：

EXCEPTION: Template parse errors:
Parser Error: Got interpolation () where expression was expected at column 1 in [ item.routerLink ] in AppHeader@5:40 ("
    <a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" item.routerLink ">
      item.text
    </a>
"): Header@5:40

header.component.ts

import Component from '@angular/core';
import ROUTER_DIRECTIVES from '@angular/router-deprecated';

@Component(
  selector: 'app-header',
  templateUrl: './app/components/header/header.component.html',
  directives: [ROUTER_DIRECTIVES]
)
export class AppHeader 
  headerItems: Object[] = [];

  constructor() 
    this.headerItems.push(
       classes: 'navLink', routerLink: ['/Home'], text: 'Home' 
    );
  

header.component.html

<div id="HeaderRegion">
  <nav class="nav">
    <a *ngFor="let item of headerItems" [routerLink]=" item.routerLink ">
      item.text
    </a>
  </nav>
</div>

【问题讨论】：

刚刚遇到问题，如果上面的解决方案给出无法绑定到“routerLink”，因为它不是“a”的已知属性。如果您的模板在自定义模块中（就像我一样），请不要忘记在您的模块中导入 RouterModule :-P

【参考方案1】：

您不能将[] 与 结合使用，无论是前者还是后者

[routerLink]="item.routerLink"

应该做你想做的。

routerLink="item.routerLink"

会将item.routerLink.toString() 绑定到routerLink 属性。

【讨论】：

为了让它工作，我必须将 headerItems 更改为“ routerLink: '/Home' ”并在 ngFor 循环中添加括号 [ ]，链接这个 [routerLink]: "[item.routerLink] "

路径周围的括号不是必需的。你用的是最新版的Angular2和路由器吗？

抱歉，不知道。 RouterLink 支持路由器命令数组或字符串形式的路径。

对我们有用routerLink="item.name"

【参考方案2】：

您也可以使用以下代码来传递带有一些文本的表达式。

<div *ngFor="let customer of customers">
   <a [routerLink]="'customer/'+customer.index">Link</a>
</div>

【参考方案3】：

这样的事情对我们有用：

<input type="checkbox" [id]="['btn.botStepState-'+i]" [(ngModel)]="btn.botStepState" name="btn.botStepState-i" (change)="changeHandler($event)" class="cbx hidden" />

属性绑定

即[]需要[]来评估值

模型绑定

即[()] 不需要什么特别的

插值

，即 可以与一般属性一起使用

事件绑定

即()与函数配合得很好

【讨论】：

我不知道这有什么帮助，这里没有什么与属性绑定之外的问题有关。

@dudewad 在我的示例中，我展示了如何使用通常也适用于该问题的 synatx - 以便提问者可以从中获得帮助。

【参考方案4】：

此时您可能已经找到了答案，因为我删除 解决了类似的问题。您的代码可能是

<a *ngFor="let item of headerItems" [routerLink]="item.routerLink">
  item.text
</a>

【参考方案5】：

如果你想通过从 ngFor 获取动态值来创建路由器链接，你可以使用下面的例子

<div *ngFor = "let item of items"> 
<a [routerLink] = "['./item-details/' + item.id]">item.name</a></div>

也就是说，只需将您收到的值附加到您要导航的 url。

【参考方案6】：

我有一个如何使您的路线动态化的示例

在您的 html 组件中

<ul class="nav side-menu">
                <li *ngFor="let data of dataPermiso;let i= index">
                  <a><i class="data.icono"></i> data.categoria <span class="fa fa-chevron-down"></span></a>
                  <ul class="nav child_menu">
                    <li *ngFor="let item of data.permisoList;let a = index">
                      <a [routerLink]="item.ruta">item.titulo</a>
                    </li>
                  </ul>
                </li>
</ul>

在您的组件中

  public dataPermiso:any[] = [];

  constructor(private loginserv: LoginService) 
    this.loadPermiso();
  



  ngOnInit() 

  

  public loadPermiso()
    this.loginserv.listPermisos(this.dataStorage.idrol).subscribe((data)=>
      this.dataPermiso= data;
    );