Angular2代码提供内联模板错误

时间:2016-08-04 16:40:50

标签: javascript html templates angular components

我有以下代码:

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

任何想法如何解决?

2 个答案:

答案 0 :(得分:1)

好像你有错字:

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

应为charStat

r代替t

答案 1 :(得分:0)

我认为这是因为var CPThread: TCPThread = nil; procedure TMyForm.CopyButtonClick(Sender: TObject); begin CPThread := TCPThread.Create('D:\test.iso', 'D:\test2.iso', FHandle); CPThread.OnTerminate := CopyFinished; CPThread.Start; CopyButton.Enabled := False; CancelButton.Enabled := True; end; procedure TMyForm.CancelButtonClick(Sender: TObject); begin if CPThread <> nil then CPThread.Terminate; end; procedure TMyForm.CopyFinished(Sender: TObject); begin CPThread := nil; CancelButton.Enabled := False; if TCPThread(Sender).FatalException <> nil then begin // thread terminated by uncaught exception, do something... end else if TCPThread(Sender).ReturnValue <> 0 then begin // CopyFileEx() failed, do something... end else begin // CopyFileEx() succeeded, do something... end CopyButton.Enabled := True; end;

中不允许<p>

Angular2对无效HTML非常严格。