Angular2代码给出内联模板错误答案

【问题标题】：Angular2 code gives inline template errorAngular2代码给出内联模板错误
【发布时间】：2016-12-10 21:52:18
【问题描述】：

我有以下代码：

import { Component } from '@angular/core';

    @Component({
      selector: 'character',
      template: `<h2 class="{{name}}">{{name}}</h2>
                <ul>
                     <li *ngFor="let charStat of charStats">
                       <p>Abilities = {{charStat.abilities}}</p>
                       <p>Appearance = {{chatStat.appearance}}</p>
                       <p>Equipment = {{charStat.equipment}}</p>
                       <p>Description = {{charStat.description}}</p>
                     </li>
                </ul>`
    })

    export class CharacterDetailsComponent {
      name = 'Mr Character';
      charStats = [{
        "id": 1,
        "abilities": [],
        "appearance": [],
        "equipment": [],
        "description": "I was born in a text village."
        }];
    }

但是，当我尝试运行它时，模板仅呈现为单个项目符号，并在浏览器控制台中显示以下错误：

EXCEPTION: Error in ./CharacterDetailsComponent class CharacterDetailsComponent - inline template:4:26

任何想法如何解决？

【问题讨论】：

标签： javascript html templates angular components

【解决方案1】：

看来你打错了：

<p>Appearance = {{chatStat.appearance}}</p>

应该是charStat

r 而不是t

【讨论】：

呃！奇怪的是，这搞砸了所有其他领域。没想到会这样。猜猜这只是习惯了新框架的变幻莫测的一个例子。考虑到输出，预计问题至少出在第一个条目上。

【解决方案2】：

我认为这是因为 <p> 不允许在 <li> 中使用

Angular2 对无效 HTML 非常严格。

【讨论】：

哦，奇怪。我自己不会这样做，但在 Code School 教程中就是这样，而且它们通常非常准确，所以我只是相信他们没问题。
如果@yurzui 的解决方案解决了你的问题，我还是错了。
不完全是。他的解决方案解决了最初的问题，但您的解决方案解决了之后出现的问题。我敢肯定我自己可以找到它，但是您的解决方案使它修复得更快。顺便说一句，我真的很喜欢 Angular2，现在我已经习惯了。写得真快。虽然在默认设置下加载速度很慢：P.