angular组件数据
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit { /* 声明属性的几种方式: public 共有 *(默认) 可以在这个类里面使用、也可以在类外面使用
protected 保护类型 他只有在当前类和它的子类里面可以访问
private 私有 只有在当前类才可以访问这个属性 */ //定义普通数据
public title='我是新闻组件'; msg='我是一个新闻组件的msg'; private username:string='张三'; //推荐
public student:any='我是一个学生的属性(数据)'; public userinfo:object={ username:"张三",
age:''
} public message:any; public content="<h2>我是一个html标签</h2>"; //定义数组 public arr=['','','']; //推荐
public list:any[]=['我是第一个新闻',,'我是第三个新闻']; public items:Array<string>=['我是第一个新闻','我是第二个新闻']; public userlist:any[]=[{
username:'张三',
age:
},{ username:'李四',
age:
},
{ username:'王五',
age:
}]; public cars:any[]=[
{ cate:"宝马",
list:[
{ title:'宝马x1',
price:'30万'
},
{ title:'宝马x2',
price:'30万'
},
{ title:'宝马x3',
price:'40万'
}
]
},
{ cate:"奥迪",
list:[
{ title:'奥迪q1',
price:'40万'
},
{ title:'奥迪q2',
price:'40万'
},
{ title:'奥迪q3',
price:'30万'
}
]
}
]
constructor() {
this.message='这是给属性赋值--(改变属性的值)';
//获取属性的值
console.log(this.msg);
//改变属性的值
this.msg="我是改变后的msg的值";
}
ngOnInit() {
} }
html
<h1>angualr模板里面绑定数据</h1>
<h2>{{title}}</h2> <h3>{{msg}}</h3> <h4>{{username}}</h4> <h5>{{student}}</h5> <hr /> <h6>{{userinfo.username}}</h6> <div> {{message}}
</div> <hr />
<h1>angualr模板里面绑定属性</h1>
<div title="我是一个div">
鼠标瞄上去看一下
</div>
<br> <div [title]="student">
张三
</div>
<hr />
<h1>angualr模板里面绑定Html</h1>
<div> {{content}}
</div> <br> <span [innerHTML]='content' class="red"></span>
<hr />
<h1>angualr模板里面允许做简单的运算</h1>
1+2={{1+2}}
<hr />
<h1>angualr里面的数据循环</h1> <ul>
<li *ngFor="let item of arr"> {{item}} </li>
</ul> <br> <ol> <li *ngFor="let item of list"> {{item}}
</li>
</ol> <br> <ol> <li *ngFor="let item of items"> {{item}}
</li>
</ol> <br> <ul> <li *ngFor="let item of userlist"> {{item.username}}---{{item.age}}
</li>
</ul> <br> <ul>
<li *ngFor="let item of cars">
<h2>{{item.cate}}</h2>
<ol>
<li *ngFor="let car of item.list"> {{car.title}}---{{car.price}} </li>
</ol> </li>
</ul>
<br>
<br>
<br>
<br>
css
.red{ color: red;
}
angular组件数据的更多相关文章
- angular组件数据和事件
<h1>引入图片</h1> <img src="assets/images/02.png" alt="收藏" /> < ...
- angular组件间的通信(父子、不同组件的数据、方法的传递和调用)
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- Angular组件——父子组件通讯
Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...
- 4.认识Angular组件之2
11. 变化监测:Angular提供了数据绑定的功能.所谓的数据绑定就是将组件类的数据和页面的DOM元素关联起来.当数据发生变化时,Angular能够监测到这些变化,并对其所绑定的DOM元素 进行相应 ...
- chart.js angular组件封装(ng6)、实战配置、插件编写
前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...
- Angular组件之间通讯
组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板 ...
- Angular组件间的数据传输
解法一 概括和流程 定义了两个组件,data-transfer-two和data-transfer-two-child,由data-transfer-two引用data-transfer-two-ch ...
- 003——angular 组件 以及组件里面的模板
创建组件: ng g component components/news 一.创建 angualr 组件................................................ ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
随机推荐
- clamscan-Linux查毒工具
转载:https://www.cnblogs.com/tdcqma/p/7576183.html clamscan命令用于扫描文件和目录,一发现其中包含的计算机病毒,clamscan命令除了扫描lin ...
- JDK环境变量配置linux
安装前先查看是否安装过jdk如果安装过则 卸载 1. 确定JDK的版本: rpm -qa | grep jdk rpm -qa | grep gcj 可能的结果是: libgcj-4.1.2-42.e ...
- python requests包的基本使用
Requests 安装requests模块: D:\Install\Python36>pip3 install requests 请求方式 #coding:utf-8 import reques ...
- Vmware Pro 14报错:无法连接 MKS: 套接字连接尝试次数太多;正在放弃。
软件环境: 虚拟机软件:VMware Pro 14 母机操作系统:win7 客户机操作系统:CentOS 7 问题详情: 报错:无法连接 MKS: 套接字连接尝试次数太多:正在放弃. ...
- 编写一个c程序来计算整数中的设置位数?
回答: unsigned int NumberSetBits(unsigned int n) { ; while (n) { ; ; } return CountSetBits; } 本质上就是计算n ...
- [bzoj 1471] 不相交路径 (容斥原理)
题目描述 给出一个N(n<=150)N(n<=150)N(n<=150)个结点的有向无环简单图.给出444个不同的点aaa,bbb,ccc,ddd,定义不相交路径为两条路径,两条路径 ...
- HTML 008 head
HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题使用 <title> 标签定义HTML文档的标题 <base> - 定 ...
- LOJ P10151 分离与合体 题解
Analysis 区间dp+记录路径 用dfs倒着找倒数第几次合并 #include<iostream> #include<cstdio> #include<cstrin ...
- mongodb mongod.lock文件及oplog文件
在mongodb的启动时,在数据目录下,会生成一个mongod.lock文件.如果在正常退出时,会清除这个mongod.lock文件,若要是异常退出,在下次启动的时候,会禁止启动,从而保留一份干净的一 ...
- Linux disk 100% busy,谁造成的?
disk 100% busy,谁造成的? 2016/11/16 vmunix iostat等命令看到的是系统级的统计,比如下例中我们看到/dev/sdb很忙,如果要追查是哪个进程导致的I/O繁忙,应该 ...