webentwicklung-frage-antwort-db.com.de

Dynamischer routerLink-Wert von ngFür Element mit Fehler "Interpolation ({{}}), bei der der Ausdruck erwartet wurde"

Ich versuche, den routerLink-Wert in einer Direktive basierend auf einer dynamischen Menge von Elementen aus der Komponente festzulegen. Aber ein Fehler wird von Angular2 geworfen:

EXCEPTION: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 1 in [ {{item.routerLink}} ] in [email protected]:40 ("
    <a *ngFor="let item of headerItems" [ERROR ->][routerLink]=" {{item.routerLink}} ">
      {{item.text}}
    </a>
"): [email protected]: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>
32
BenR

Sie können [] nicht zusammen mit {{}} verwenden

[routerLink]="item.routerLink"

Sollte tun, was du willst.

routerLink="{{item.routerLink}}"

würde item.routerLink.toString() an die routerLink-Eigenschaft binden.

74

Sie könnten die Antwort bis zu diesem Zeitpunkt gefunden haben, da ich {{}} das ähnliche Problem behoben habe. Ihr Code könnte sein

<a *ngFor="let item of headerItems" [routerLink]="item.routerLink">
  {{item.text}}
</a>
3
madhav bitra

Sie können auch den folgenden Code verwenden, um einen Ausdruck mit etwas Text zu übergeben.

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

Ich habe ein Beispiel, wie Sie Ihre Routen dynamisch gestalten können

in Ihrer HTML-Komponente

<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>

in Ihrer Komponente ts

  public dataPermiso:any[] = [];

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



  ngOnInit() {

  }

  public loadPermiso(){
    this.loginserv.listPermisos(this.dataStorage.idrol).subscribe((data)=>{
      this.dataPermiso= data;
    });
  }
0
Edson Suárez

So etwas hat bei uns funktioniert:

<input type="checkbox" [id]="['btn.botStepState-'+i]" [(ngModel)]="btn.botStepState" name="btn.botStepState-{{i}}" (change)="changeHandler($event)" class="cbx hidden" />
  • Eigenschaftsbindung d. H. [] benötigt [] zur Auswertung von Werten
  • Modellbindung d.h. [()] erfordert nichts Besonderes
  • Interpolation d. H. {{}} könnte mit allgemeinen Attributen verwendet werden
  • Ereignisbindung d. H. () hat mit Funktionen gut funktioniert
0
student