1. Template data binding is generated repeatedly according to the number of data
*ngFor="let XXX of YYY"
① Declare the data type in the. component.ts file
eg: such as stars
a. private stars: boolean[];
b. Initializing in ngOnInit(), initializing data
c. Add * ngFor="let XXX of YYY" to the module generated repeatedly in html file
XXX is to generate a new array name, YYY is the object declared in the. ts file
2. Data binding
① Difference expression
{{}}: direct reference
② Property binding
Eg: image path of product
In the product.component.ts file
private imgUrl = 'http://placehold.it/320x150';
Then set < img > in html as
<img [src]="imgUrl">
You can bind the picture URL to the background data
PS: special case. Style binding. html file
<span *ngFor="let star of stars" [class.glyphicon-star-empty]="star"></span>
Put forward the style in class. If it is true, add the style. If it is false, do not change the style
3. How to transfer parent component data through child components
Add @ Input() before the stars.component.ts declaration
< app stars > < app stars > component is a sub component of product
--------------------------------------------------------------------------------------------
product.component.html
<div *ngFor="let product of products"> <div> <img [src]="imgUrl"> <div> <h4>{}element</h4> <h4><a>{}</a></h4> <p>{}</p> </div> <div> <app-stars [rating]="product.rating"></app-stars> </div> </div> </div>
-----------------------------------
product.component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent implements OnInit { private products: Array<Product>; private imgUrl = 'http://placehold.it/320x150'; constructor() { } ngOnInit() { this.products = [ new Product( 1, '"First-Picture"', 1.99, 4.5, '"The first picture of animation library, my school of Heroes"', ['Anime', 'Hot']), new Product( 2, '"Seconde-Picture"', 2.99, 3.5, '"Second picture of animation library, my school of Heroes"', ['Anime', 'Hot']), new Product( 3, '"Third-Picture"', 3.99, 4.5, '"The third picture of animation library, my school of Heroes"', ['Anime', 'Hot']), new Product( 4, '"Forth-Picture"', 4.99, 3.5, '"Fourth picture of animation library, my school of Heroes"', ['Anime', 'Hot']), new Product( 5, '"FIfth-Picture"', 5.99, 2.5, '"Fifth picture of animation library, my school of Heroes"', ['Anime', 'Hot']), new Product( 6, '"Sixth-Picture"', 5.99, 1.5, '"Sixth picture of animation library, my school of Heroes"', ['Anime', 'Hot']) ]; } } export class Product { constructor( public id: number, public title: string, public price: number, public rating: number, public desc: string, public categories: Array<string> ) { } }
-----------------------------------
stars.component.html
<p> <span *ngFor="let star of stars" [class.glyphicon-star-empty]="star"></span> <span>{}Star</span> </p>
-----------------------------------
stars.component.ts
import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-stars', templateUrl: './stars.component.html', styleUrls: ['./stars.component.css'] }) export class StarsComponent implements OnInit { @Input() private rating: Number = 0; private stars: boolean[]; constructor() { } ngOnInit() { this.stars = []; for (let i = 1; i <= 5; i++) { this.stars.push(i > this.rating); } } }