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

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>

頁面效果如下所示：