If you want to dynamically construct a template with a set of data that can be traversed , you should use the ngfor directive. For example, the Ezstar component is used to display a list of the actors ' works:
Iteration
The ngfor directive is applied on the template element, instantiating the contents of a template for each item in the dataset specified by the ngforof property:
1 ng-for= "" [ng-for-of]= "Items">2 <li>----------</li>3 </ Template>
If the items DataSet has 3 records, then 3 Li objects are generated, just like this:
1 <li>----------</li>2 <li>----------</li>3 <li>-------- --</li>
But it's not much of a big use.
Working with data items
Fortunately, we can also declare a local variable for each item in the dataset to be referenced within the template:
1 ng-for= "" [ng-for-of]= "items" #item = "">2 <li>{{item}}</li>3 < /template>If the items DataSet is an array: ["China", "India", "Russia"], then the resulting results are a bit of a use:
1 <li>China</li>2 <li>India</li>3 <li>Russia</li>
Working with data item indexes
Sometimes you need the index of the data item in the dataset, and we can also declare a local variable for the index of each item in the dataset to reference within the template:
1 ng-for= "" [ng-for-of]= "items" #item = "" #i = "index">2 <li>[{{i+1}}] {{item}} </li>3 </template>Now the resulting results are more disciplined:
1 <li>[1] china</li>2 <li>[2] india</li>3 <li>[3] Russia </li>
Grammar sugar
Similar to Ngif, ANGULAR2 also provides two syntactic sugars for ngfor:
1 // using template attribute 2 <any template= "ng-for #item of items; #i =index">...</any>3// Use the * prefix 4 *ng-for= "#item of items; #i =index">...</any>
There is no doubt that you should try to use *ng-for 's simple notation, which can improve the readability of the template
For example:
1<!doctype html>234<meta charset= "Utf-8" >5<title>NgFor</title>6<script type= "Text/javascript" src= "Lib/[email protected]" ></script>7<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>8<script type= "Text/javascript" src= "Lib/system.config.js" ></script>9Ten<body> One<ez-app></ez-app> A<script type= "Module" > - //introducing the Ngswitch type -Import {component,view,bootstrap,ngfor} from "Angular2/angular2"; the -@Component ({selector: "Ez-app"}) - @View ({ - directives: [Ezstar], + Template: ' -<ez-star></ez-star> + ` A }) at class ezapp{} - - @Component ({ -Selector: "Ez-star" - }) - @View ({ in Directives:[ngfor], - Template: ' to<div> + -<ul> the <li *ng-for= "#film of films; #i =index" >[{{i+1}}]{{film}}</li> *</ul> $</div>Panax Notoginseng ` - }) the class ezstar{ + Constructor () { A This. actor = "Jason Statham"; the This. Films = [ +"Mechanic:rescurrection/2016", -"Spy/2015", $"Furious 7/2015", $"Wild card/2015", -"The expendables/2014", -"Home front/2013", the"Hummingbird/2013", -"Fast & Furious 6/2013",Wuyi"Parker/2013" the ]; - } Wu } - About Bootstrap (Ezapp); $</script> -</body> -The results are as follows:
ANGULAR2 Component Development-logical control of templates (iii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
