Show pageBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== Directive *ngFor ====== Assume we have a component called servers. ngFor takes an array, and loop them through. ''{{}}'' is the way to bind the value from JavaScript/Type Script to HTML. Of course, the ''hList'' in our example can be change dynamically, and the UI will refresh if it is changed. {{ :ng:ngfor.png?nolink&400 |}} ===== servers.component.html ===== <code> <ul *ngFor="let word of hList"> <li>{{word}}</li> </ul> </code> If we want to get the index of the array as well, we can do <code> <ul *ngFor="let word of hList; let i = index"> <li>{{i}}: {{word}}</li> </ul> </code> ===== servers.component.ts ===== <code> import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-servers', templateUrl: './servers.component.html', styleUrls: ['./servers.component.css'] }) export class ServersComponent implements OnInit { hList: string[]; constructor() { } ngOnInit() { this.hList = []; this.hList.push("apple"); this.hList.push("banana"); this.hList.push("cat"); this.hList.push("dog"); this.hList.push("egg"); } } </code> ng/directive_ngfor.txt Last modified: 2019/11/18 17:24by chongtin