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>

页面效果如下所示：

转载于:https://www.cnblogs.com/dwllm/p/9985330.html