Angular4 learning (IV) Product component and Stars component linkage

1, The first Angular technology used

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 glyphicon-star"
  [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" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img [src]="imgUrl">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}element</h4>
      <h4><a>{{product.title}}</a></h4>
      <p>{{product.desc}}</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 glyphicon-star"
  [class.glyphicon-star-empty]="star"></span>
  <span>{{rating}}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);
    }
  }

}

 

Tags: angular

Posted on Thu, 02 Jan 2020 12:46:03 -0500 by derrick1123