Angular2 代码给出内联模板错误

Question

我有以下代码：

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

有什么解决办法吗？

Answer 1

我想这是因为 <p> 在 <li>

中是不允许的

Angular2 严格禁止无效HTML。

Answer 2

你好像打错了：

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

应该是charStat

r 而不是 t

Angular2 代码给出内联模板错误

Angular2 code gives inline template error

html

javascript

templates

components

angular