Angular 一覧表示の基本

● Angular 一覧表示の基本

app/app.component.ts

 ngOnInit() {
    this.boards_loop = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];    
  }

app/app.component.html

<li *ngFor="let board of boards_loop">
    <span class="badge">{{board.id}}</span> : {{board.name}}
</li>

出力結果

<ul _ngcontent-bek-c0=""><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">11</span> : Mr. Nice
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">12</span> : Narco
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">13</span> : Bombasto
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">14</span> : Celeritas
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">15</span> : Magneta
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">16</span> : RubberMan
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">17</span> : Dynama
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">18</span> : Dr IQ
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">19</span> : Magma
</li><li _ngcontent-bek-c0=""><span _ngcontent-bek-c0="">20</span> : Tornado
</li></ul>

app/app.component.html ( ng-container を使うやり方 )

    <ng-container *ngFor="let board of boards_loop">
        <li><span>{{board.id}}</span> : {{board.name}}</li>
    </ng-container>      

出力結果 ( ng-container を使うやり方 )

<ul _ngcontent-nve-c1="">
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
     }-->
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">11</span> : Mr. Nice</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">12</span> : Narco</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">13</span> : Bombasto</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">14</span> : Celeritas</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">15</span> : Magneta</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">16</span> : RubberMan</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">17</span> : Dynama</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">18</span> : Dr IQ</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">19</span> : Magma</li>
    <!---->
    <li _ngcontent-nve-c1=""><span _ngcontent-nve-c1="">20</span> : Tornado</li>
</ul>

参考 : Angularの便利タグng-container, ng-content, ng-template - Qiita

No.1789
06/15 17:25

edit