angular 中数据循环 *ngFor - Powered by Discuz! Archiver

首页 › Angular论坛 › angular 中数据循环 *ngFor

孙文政 發表於 2019-5-17 18:01:00

angular 中数据循环 *ngFor

<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)"></span>
<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">div </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="text-align:center"</span><span style="color: rgba(0, 0, 255, 1)">></span>

<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
Welcome to {{ title }}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>

<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>循环数据显示数据的索引（key）<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">h1</span><span style="color: rgba(0, 0, 255, 1)">></span>

<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>

<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">li </span><span style="color: rgba(255, 0, 0, 1)">*ngFor</span><span style="color: rgba(0, 0, 255, 1)">="let item of list;let key=index;"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">
   {{key}}---{{item.title}}
</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">li</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">ul</span><span style="color: rgba(0, 0, 255, 1)">></span>
<span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">div</span><span style="color: rgba(0, 0, 255, 1)">></span>

<span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">router-outlet</span><span style="color: rgba(0, 0, 255, 1)">></</span><span style="color: rgba(128, 0, 0, 1)">router-outlet</span><span style="color: rgba(0, 0, 255, 1)">></span></pre>
</div>
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;

@Component({
selector: </span>'app-root'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./app.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./app.component.scss'<span style="color: rgba(0, 0, 0, 1)">]
})
export class AppComponent {
title </span>= 'Angulardemo'<span style="color: rgba(0, 0, 0, 1)">;
public list:any[]</span>=<span style="color: rgba(0, 0, 0, 1)">[
{
   </span>"title":'我是数据1'<span style="color: rgba(0, 0, 0, 1)">
},
{
   </span>"title":'我是数据2'<span style="color: rgba(0, 0, 0, 1)">
},
{
   </span>"title":'我是数据3'<span style="color: rgba(0, 0, 0, 1)">
}
];
}</span></pre>
</div>
<p>效果:</p>
<p><img src="https://img2018.cnblogs.com/blog/1100100/201905/1100100-20190517180059752-1228163370.png" alt=""></p>

</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10882866.html

頁: [1]

查看完整版本: angular 中数据循环 *ngFor