Angular2: Parsen von Daten im HTML-Tags

Question

I Winkel 2 mit und ich bin Laden von Daten aus einem Dienst meine Ansicht, die speziell auf Tasten:

meine Ansicht:

<div id="menuMaisons" class="collapse" *ngFor="#item of items_list"> 
    <li> 
     <div > 
     <a href="{{item.href}}" class="{{item.class}}" data-toggle={{'item.toggle'}} data-parent={{'item.parent'}} > 
      <span class="titres"> {{item.label}}</span> 
     </a> 
     </div> 
    </li> 
</div> 

mein Service ist einfach parsin dieser json Daten:

[ 

    { "//////////////////SUBMENU MAISON////////////////":""}, 

    { "id": 1, "href": "#maisonsTemoins" ,"class": "list-group-item", "toggle": "collapse" ,"parent":"#menuMaisons" ,"label":"Maisons Tèmoins" }, 


    { "id": 2, "href": "" ,"class": "list-group-item", "toggle": " " ,"parent":" " ,"label":"Charger Photo" } 


] 

die Analyse fehlschlägt und ich habe nicht verstanden, was für ein Fehler es ist; der Fehler:

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Unexpected closing tag "a" ("      
<span class="titres"> {{item.label}}</span> 
            [ERROR ->]</a> 
           </div> 
          </li> 

Answer 1

<li> 
     <div > 
     <a [attr.href]="item.href" 
      [ngClass]="item.class" 
      [attr.data-toggle]="item.toggle" 
      [attr.data-parent]="item.parent" > 
      <span class="titres"> {{item.label}}</span> 
     </a> 
     </div> 
</li> 

Answer 2

Obwohl die Frage wurde richtig beantwortet und akzeptiert, aber ich fühle Antwort mit Erklärung für Frages einige Punkte nicht so viel geklärt ist hier anzumerken, -

• Als Frage können Sie nicht {{'item.toggle'}} Zitat zwischen der interpolierten Syntax des Winkels verwenden, es wirft keinen Fehler, aber eckig behandelt dies als eine Zeichenfolge und ret Geben Sie es als Zeichenfolge zurück, die Sie im interpolierten Ausdruck angegeben haben ({{ }}). zum Beispiel -

hallo {{name}} {{ 'name'}}

this.name = "Pardeep Jain";

Ergebnis ist - hallo Pardeep Jain Name

• Während dynamische Daten auf vordefinierte Elemente bereitstellt, es ist besser zu nutzen Attribut angular2 gegeben Bindung. Angular verwendet standardmäßig die Eigenschaftenbindung. Um Angular explizit die Verwendung der Attributbindung zu ermöglichen, verwenden wir stattdessen: - [attr.property_name]. zum Beispiel in der Antwort-

  [attr.href], [attr.data-Toggle] usw.

• Zum Zeitpunkt der Eigenschaft html-Element-Bindung besser elevis operator zu verwenden, es tut Es ist nicht möglich, jede Art von Fehler zu werfen und zu verhindern, dass App hilft, wenn Sie die Bindung von Eigenschaften irgendwo getan haben, aber aus irgendeinem Grund Daten nicht richtig erhalten, so eckig wird Fehler in diesem Fall besser Elvis Operator zu verwenden. zum Beispiel -

  {{item.abc}} - throw Fehler, wenn Artikel gefunden {item {.abc}}? nicht

  - Fehler vermeiden.