1. 本節說明

本節的內容會在上期搭建的框架基礎上進行數據的填充，順便回顧之前介紹過的插值表達式，屬性綁定等知識，本節的數據只是在組件中模擬數據，後面會有專門的章節講解如何從服務器獲取數據。

2. 輪播組件屬性綁定

首先把輪播圖使用的圖片放在項目的src/assets目錄下（圖片請自行準備），然後在carousel.component.ts中定義輪播使用的圖片屬性：

import { Component, OnInit } from ‘@angular/core‘;

@Component({
    selector: ‘app-carousel‘,
    templateUrl: ‘./carousel.component.html‘,
    styleUrls: [‘./carousel.component.css‘]
})
export class CarouselComponent implements OnInit {

    //step2.定義三張圖片
    private img1:Img;
    private img2:Img;
    private img3:Img;

    constructor() { }

    //step3.然後初始化圖片
    ngOnInit() {
        this.img1 = new Img("../assets/1.jpg","圖片一");
        this.img2 = new Img("../assets/2.jpg","圖片二");
        this.img3 = new Img("../assets/3.jpg","圖片三");

    }

}

//step1.定義輪播的圖片對象
export class Img {
    constructor(
        public imgSrc: String,
        public imgAlt: String
    ) {

    }
}
 

carousel.component.html修改如下：

<div id="carousel-ex" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="carousel-ex" data-slide-to="0" class="active"></li>
        <li data-target="carousel-ex" data-slide-to="1"></li>
        <li data-target="carousel-ex" data-slide-to="2"></li>
    </ol>

    <div class="carousel-inner listbox">
        <div class="item active">
            <!-- 屬性綁定 -->
            <img [src]="img1.imgSrc" [alt]="img1.imgAlt">
            <div class="carousel-caption">
                {{img1.imgAlt}}
            </div>
        </div>
        <div class="item">
            <img [src]="img2.imgSrc" [alt]="img2.imgAlt">
            <div class="carousel-caption">
                {{img2.imgAlt}}
            </div>
        </div>
        <div class="item">
            <img [src]="img3.imgSrc" [alt]="img3.imgAlt">
            <div class="carousel-caption">
                {{img3.imgAlt}}
            </div>
        </div>
    </div>

    <a href="#carousel-ex" class="left carousel-control" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a href="#carousel-ex" class="right carousel-control" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
 

頁面效果如下：

3.文章組件數據循環

首先修改article.component.ts初始化文章數據：

import { Component, OnInit } from ‘@angular/core‘;

@Component({
    selector: ‘app-article‘,
    templateUrl: ‘./article.component.html‘,
    styleUrls: [
        ‘./article.component.css‘
    ]
})
export class ArticleComponent implements OnInit {

    //step2.聲明文章對象數組
    private articles: Array<Article>;

    constructor() {
    }

    //step3.初始化數組數據
    ngOnInit() {
        this.articles = [
            new Article(1,"angular常用操作1","admin","本節介紹angular常用操作...",3000,50),
            new Article(2,"angular常用操作2","admin","本節介紹angular常用操作...",600,10),
            new Article(3,"angular常用操作3","admin","本節介紹angular常用操作...",20,5),
        ]
    }
}

//step1. 定義文章對象
export class Article{
    constructor(
        public id: number,      //文章Id
        public title: String,   //文章標題
        public author: String,  //文章作者
        public zy: String,      //文章摘要
        public yd: number,      //閱讀數
        public pl: number       //評論數
    ){

    }
}
 

然後修改article.component.html 內容如下：

<div class="content-wrap">
    <div *ngFor="let article of articles" class="article">
        <h3 class="title">{{article.title}}</h3>
        <p class="zy">
            {{article.zy}}
        </p>
        <p class="info">
            <span>2018-11-18 21:15:</span>&nbsp;&nbsp;
            <span>閱讀數：{{article.yd}}</span>&nbsp;&nbsp;
            <span>評論數：{{article.pl}}</span>&nbsp;&nbsp;
        </p>
    </div>
</div>

頁面效果如下所示：

4. 樣式綁定的另外一種方法

現在實現這樣一個需求，當文章的閱讀量超過1000時，文章的標題以紅色顯示。

首先，我們在article.component.css中增加樣式：

.hot{
    color: red !important;
}

然後在article.component.html中需要添加樣式的地方添加如下代碼：

<!-- 當article.yd>1000時，h3會加上hot樣式，否則不加 -->
<h3 class="title" [class.hot]="article.yd>1000">{{article.title}}</h3>

頁面效果如下所示：

Angular7教程-06-頁面與數據交互