Angular2代码给出内联模板错误

Posted 2023-02-23

【中文标题】Angular2代码给出内联模板错误

【英文标题】：Angular2 code gives inline template error

【发布时间】：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

任何想法如何解决？

【参考方案1】：

看来你打错了：

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

应该是charStat

r 而不是t

【讨论】：

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

【参考方案2】：

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

Angular2 对无效 html 非常严格。

【讨论】：

哦，奇怪。我自己不会这样做，但在 Code School 教程中就是这样，而且它们通常非常准确，所以我只是相信他们没问题。

如果@yurzui 的解决方案解决了你的问题，我还是错了。

不完全是。他的解决方案解决了最初的问题，但您的解决方案解决了之后出现的问题。我敢肯定我自己可以找到它，但是您的解决方案使它修复得更快。顺便说一句，我真的很喜欢 Angular2，现在我已经习惯了。写得真快。虽然在默认设置下加载速度很慢：P.