如何为 [routerLink] 提供与数组值相对应的动态值？答案

【问题标题】：How to give dynamics values for [routerLink] which it corresponds to values of an array?如何为 [routerLink] 提供与数组值相对应的动态值？
【发布时间】：2019-09-24 22:54:39
【问题描述】：

我想在我的模板中创建一个动态路由。路由的值来自一个用 ngFor 迭代的数组。我还想对这些字符串类型的值进行一些转换。谢谢

我试图从数组中放入值，但它给了我这个错误：错误：无法匹配任何路由。 URL 段：'items.label' 错误：无法匹配任何路由。 URL 段：'items.label'

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="['items.label'] " href="#" >
</li>

【问题讨论】：

尝试删除'items.label'中的单引号
谢谢，但是如何将 items.label 的值转换为小写呢？
我会使用一个“管道”来转换你的每一个项目。看看this链接。
对不起，我用过，但我写错了。它现在有效！谢谢！

标签： angular ngfor angular-ng-if routerlink

【解决方案1】：

'items.label'

中应该没有引号

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label] " href="#" >
</li>

【讨论】：

【解决方案2】：

去掉单引号

 <li *ngFor = "let items of this.labelsMenu|async">
        <a[routerLink]="[items.label]" href="#" >
    </li>

【讨论】：

【解决方案3】：

去掉单引号和href="#"

<li *ngFor = "let items of this.labelsMenu|async">
    <a [routerLink]="['items.label']">
</li>

【讨论】：

【解决方案4】：

您只需删除single quotations和href='#'。希望你想把href 因为悬停鼠标指针。为此，您可以在标签中添加给定style="cursor: pointer" 的样式。

<li *ngFor = "let items of this.labelsMenu|async">
    <a[routerLink]="[items.label]" style="cursor: pointer">
</li>

【讨论】：