Angular2:解析html标签中的数据 [英] Angular2 : Parsing data in html tags

问题描述

我正在使用 angular 2 并且我正在将数据从服务加载到我的视图，特别是按钮:

我的观点:

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

我的服务只是解析这个json 数据:

<预><代码>[{ "//////////////////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" }]

解析失败，我不明白这是什么类型的错误；错误:

 例外:错误:未捕获(承诺):模板解析错误:意外的结束标记a"(<span class="titres">{{item.label}}</span>[错误 ->]

解决方案

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

I'm using angular 2 and I'm loading data from a service to my view, specifically to buttons:

my View :

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

my service is simply parsin this json data :

[

  { "//////////////////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" }


]

the parsing fails and i haven't understood what kind of error is it ; the error :

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

解决方案

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

这篇关于Angular2:解析html标签中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！