Angular2学习笔记(三) Angular2 数据显示

前几节是Angular2和TypeScript分开学的,以后准备边学Angular2遍学TypeScript,只有边学边用,才会更深刻的理解TypeScript,好,下面直奔主题

创建应用

前面我们已经介绍了如何安装nodejs和angular-cli,下面我们默认都已经安装了angular-cli,首先来创建一个名为my-app的应用

ng new my-app

等待几分钟后会创建好应用,现在我们将对应用进行自定义的修改以下文件

• app.component.html(模板文件)

<h1></h1>
<h2>介绍: </h2>
<h2>我的技能:</h2>
方法一展示
<ul>
  <!--这里采用TypeScript语法遍历skills-->
  <li *ngFor="let skill of skills1">
    id:,名称: 
  </li>
</ul>
方法二展示
<ul class="show2">
  <!--这里采用TypeScript语法遍历skills-->
  <li *ngFor="let skill of skills2">
    id:,名称: 
  </li>
</ul>

<p *ngIf="skills1.length >= 3">哇,好厉害哦,你有三种以上技能!</p>
<p *ngIf="skills1.length < 3">您不到三种技能,加油哦!</p>

上面的和,title和introduction为组件的变量,其实就是输出变量,当然是动态的了(当变量变化自动更新页面),ngFor=”let skill of skills1”代表循环变量skills1,ngIf=”skills1.length >= 3”同理是判断语句

• 增加skill.ts文件

export class Skill {
  id: number;
  name: string;
  constructor(id: number,name: string) {
    this.id = id;
    this.name = name;
  }
}

这里出现了export关键词,只有export了,其他地方才可以import,constructor是构造方法,其实两个参数.

• app.component.ts文件如下

import { Component } from '@angular/core';
import { Skill } from './skill';
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
// export为导出类(如果想外部引用必须要求可导出,否则外部不可以导入),typescript语法
export class AppComponent {
  title = 'Angular2笔记';
  introduction = '我是一个Angular2新手';
  skills1: Skill[] = [
    {id: 1,name: 'JAVA'},{id: 2,name: 'PHP'},{id: 3,name: 'Python'},{id: 4,name: 'JavaScript'},{id: 5,name: 'Others'}];

  // 必须要求有对应的构造方法
  skills2 = [
    new Skill(1,'JAVA'),new Skill(2,'PHP'),new Skill(3,'Python'),new Skill(4,'JavaScript'),new Skill(5,'Others'),];
}

上面我们初始化了四个变量,其中title和introduction为字符串类型,skills1和skills2为数组类型,skills1: Skill[]可以加类型也可以不加类型,不加类型代表松散类型对象,skills2同样也可以规定类型.new Skill代表创建对象并给定参数,上面已经给出具体构造方法.

• app.component.css 我们为其增加模板样式

h1 {color: red}
h2 {font-size: large;}
.show2 {
  list-style-type: none ;
}
.show2 li {
  color: green;
}

• app.component.spec.ts为集成测试文件,暂时不用管它,只要不执行test就不会出错,或者我们删除相关的对

我们在命令行执行ng s 就可以运行项目

项目运行时会出现Loading…英文字母,因为angular2渲染需要时间,所以会闪动,我们可以将其修改成自己喜欢的一些动画之类的来提高体验效果,其在index.html文件中

注意

我们要使用import的时候一定要export一下,否则无法使用

查看源代码

演示地址

如要转载，请保持本文完整，并注明作者luamas和本文原始地址：http://blog.luamas.com/2017/03/22/angular2-003-according-data/