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