大佬教程收集整理的这篇文章主要介绍了Angular2学习笔记(三) Angular2 数据显示,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
前几节是Angular2和TypeScript分开学的,以后准备边学Angular2遍学TypeScript,只有边学边用,才会更深刻的理解TypeScript,好,下面直奔主题
前面我们已经介绍了如何安装nodejs和angular-cli,下面我们默认都已经安装了angular-cli,首先来创建一个名为my-app的应用
ng new my-app
等待几分钟后会创建好应用,现在我们将对应用进行自定义的修改以下文件
<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”同理是判断语句
export class Skill { id: number; name: String; constructor(id: number,name: String) { this.id = id; this.name = name; } }
这里出现了export关键词,只有export了,其他地方才可以import,constructor是构造方法,其实两个参数.
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代表创建对象并给定参数,上面已经给出具体构造方法.
h1 {Color: reD} h2 {font-size: large;} .show2 { list-style-type: none ; } .show2 li { color: green; }
项目运行时会出现Loading…英文字母,因为angular2渲染需要时间,所以会闪动,我们可以将其修改成自己喜欢的一些动画之类的来提高体验效果,其在index.html文件中
我们要使用import的时候一定要export一下,否则无法使用
如要转载,请保持本文完整,并注明作者luamas和本文原始地址:@L_301_2@
以上是大佬教程为你收集整理的Angular2学习笔记(三) Angular2 数据显示全部内容,希望文章能够帮你解决Angular2学习笔记(三) Angular2 数据显示所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。