如何将这些代码放到 Angular2 组件中

Question

HTML Code:

  <ul class="arc">
    <li class="active"><a href="#">Home</a></li>
    <li class="important"><a href="#">URL1</a></li>
    <li><a href="#">URL2</a></li>
    <li class="other">&nbsp;</li>
  </ul>

Angular2 Code:

 @Component({ selector: 'arc-list', template: ` <ul class="nav navbar-nav"> <li *ngFor="arclink of arclinks"><a href="{{arclink.url}}" title="{{arclink.title}}"> {{arclink.description}}</a> </li> </ul> ` }) export class ArcList { arclinks = [ {"url":"#", "description":"Home", "title":"TitleHome", "class":"active"}, {"url":"#", "description":"URL1", "title":"Title1", "class":"important"}, {"url":"#", "description":"URL2", "title":"Title2", "class":""}, {"url":"", "description":"other", "title":"other", "class":"other"} ] }

How can I write the component code to let the component generate the same thing as the HTML Code ?

Thank you

Answer 1

Make sure arclinks are set as property of your component and use *ngFor="let arclink of arclinks" (note let keyword):

@Component({
  selector: 'arc-list',
  template: `
      <ul class="nav navbar-nav">
        <li *ngFor="let arclink of arclinks">
          <a href="{{arclink.url}}" title="{{arclink.title}}">{{arclink.description}}</a>
        </li>
      </ul>
  `
})
export class ArcList {
  arclinks = [
    {"url":"#", "description":"Link1", "title":"Title1", "class":"active"}, 
    {"url":"#", "description":"Link1", "title":"Title1", "class":""}, 
    {"url":"#", "description":"Link1", "title":"Title1", "class":""}
  ]
}