0

I have the following code:

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."
        }];
    }

However, when I try to run it, the template renders as a single bullet-point only and shows the following error in the browser console:

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

Any ideas how to fix?

Improve this question

2 Answers 2

Reset to default
1

Seems you have a typo:

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

it should be charStat

r instead of t

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Ugh! Weird that this messed up all the other fields, though. Wouldn't have expected that. Guess it's just a case of getting used to the vagaries of a new framework. Was expecting the problem to be with the first entry at the very least, given the output.
0

I assume it's because <p> is not allowed within <li>

The Angular2 is strict about invalid HTML.

Improve this answer

3 Comments

Oh, strange. I wouldn't have done that myself, but that's the way it was in the Code School tutorial and they're usually bang on accurate, so I just trusted them that it was ok.
If @yurzui s solution fixes your issue I'm wrong anyway.
Not exactly. His solution fixed the initial problem, but yours fixed the one that came up after. I'm sure I could have found it myself, but your solution made it a lot quicker to fix. On a tangential note I really like Angular2 now I've got used to it. REALLY quick to write. Though slow as hell to load on default settings :P.