component.ts
~~~
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
public arr:any[]=[
'1','2','3','4'
];
public arr2:object=[1,2,3,4];
public doubleArr:Array<object>=[
{str1:"123"} ,
{str2:
{key:"123"}
}
]
ngOnInit(): void {
}
}
~~~
>HTML 与下标索引 , 内置结构指令
~~~
<ul>
<li *ngFor="let item of arr">
{{item}}
</li>
</ul>
<p>下面是索引</p>
<ul>
<li *ngFor="let item of doubleArr;let key=index">
{{key}}--{{item}}
</li>
</ul>
<p>数组的0下表的str1对象</p>
{{doubleArr[0].str1}}
~~~
- 引言
- 安装angular9
- 入门
- 数据绑定
- 属性绑定
- 实体字符和转义
- html 模板运算
- css样式规范
- 数组与循环ngFor
- 条件ngIf
- 管道
- 事件执行
- 双向数据绑定mvvm
- todolist页面交互
- 公共服务层
- 数据持久化
- dom与ViewChild装饰器
- 父子组件传值
- 子父组件传值ViewChild
- 子父组件out装饰器
- 生命周期-挂/卸载
- es6语法io异步promise
- Rxjs异步数据流编程
- http_request
- axios异步数据
- 英雄route路由
- 动态route路由
- navigate route
- Parent child routing
- modularization
- lazyload