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, //文章Idpublic 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>

頁面效果如下所示：

轉載于:https://www.cnblogs.com/dwllm/p/9985330.html

總結

以上是生活随笔為你收集整理的Angular7教程-06-页面与数据交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。