Angular2：解析 html 标签中的数据

Question

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

我的看法：

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

我的服务只是解析这个 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" }


]

解析失败，我还没弄明白是什么错误； 错误：

    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

虽然问题得到了正确的回答并被接受，但我觉得答案没有那么清楚，对提问者的解释也有几点需要注意-

你不能在 angular 的内插语法之间使用 {{'item.toggle'}} 引号，它不会抛出任何错误，但 angular 会将其视为string 和 return 它返回为您在插值表达式 ({{ }}) 中提供的字符串。例如 -

hello {{name}} {{'name'}}

this.name = "pardeep Jain";

Result is - hello pardeep Jain name

在为预定义元素提供动态数据时，最好使用 angular2 给出的属性绑定。 Angular 默认使用属性 binding.To 明确告诉 Angular 使用属性绑定，我们使用： -[attr.property_name] 。例如在答案中-

[attr.href] , [attr.data-toggle] etc.
在属性绑定到 html 元素时最好使用 elevis operator 它不允许抛出任何类型的错误并防止停止out app 当你在某处完成属性绑定但由于任何原因数据未正确获取时它会有所帮助所以 angular 在这种情况下会抛出错误更好地使用 elvis 运算符。例如 -

{{item.abc}} - throw error if item not found

{{item?.abc}} - prevent error.

Angular2：解析 html 标签中的数据

Angular2 : Parsing data in html tags

angular2-template

angular