如何将这些代码放入 Angular2 组件

Question

HTML 代码：

  <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 代码：

    @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"}
      ]
    }

如何编写组件代码让组件生成与 HTML 代码相同的东西？

谢谢

Answer 1

确保将arclinks 设置为组件的属性并使用*ngFor="let arclink of arclinks"（注意let 关键字）：

@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":""}
  ]
}