Question

我正在尝试将JS对象绑定到html模板，以显示一些导航链接，但无济于事。如果我在html中硬编码相同的信息，则链接有效。

component.ts

  navigation = [
    { link: '/home', label: 'Home', fragment: null },
    { link: '/home', label: 'Get Your Number!', fragment: 'get-your-number' },
    { link: '/home', label: 'Pricing', fragment: 'pricing' },
    { link: '/contact-us', label: 'Contact Us', fragment: null },
    { link: '/signin', label: 'Sign In', fragment: null },
  ];

component.html

            <button
              mat-button
              *ngFor="let item of navigation"
              [routerLink]="[item.link]"
              [fragment]="[item.fragment]"
              routerLinkActive="active"
            >
              {{ item.label }}
            </button>

模板中的硬编码版本有效：

<button mat-button routerLink="/home" fragment="pricing" routerLinkActive="active">

Answer 1

尝试一下：更改

[routerLink]="[item.link]" [fragment]="[item.fragment]" `

到

[routerLink]="item.link" [fragment]="item.fragment"

'routerLink'和'fragment'指令的绑定不起作用

1 个答案: