Angular 父子组件以及组件之间通讯 _组件

绑定属性
用[]包裹

绑定属性

数据循环 *ngFor
1、普通循环

export class HomeComponent implements OnInit {arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];constructor() { }ngOnInit() {}}

{{item.name}}- {{item.age}}
2、循环的时候设置key

 {{item}} --{{i}}

3、循环数据

{{item}}

条件判断 *ngIf

 3">这是 ngIF 判断是否显示 

 3">这是 ngIF 判断是否显示

已支付
订单已经确认
 已发货
无效

执行事件 (click)=”()”

getData(){ /*自定义方法获取数据*/ //获取alert(this.msg);} setData(){//设置值this.msg='这是设置的值';}

表单事件

keyUpFn(e){console.log(e)}
双向数据绑定

注意引入:

import {FormsModule} from '@angular/forms'NgModule({declarations: [AppComponent,HeaderComponent,FooterComponent,NewsComponent], imports: [BrowserModule,FormsModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }

{{inputValue}}
[]
这是一个 div
public flag=false;
这是一个 div
public arr = [1, 3, 4, 5, 6];

 [ngClass]="{'red': i==0}">{{item}}

[]
public attr='red';
你好 ngStyle
管道
中的管道(pipe)是用来对输入的数据进行处理，如大小写转换、数值和日期格式化等
日期格式转换
public today=new Date();