一.循环 ngFor

//在html文件中
<div>{{title}}</div>
<ul><li *ngFor="let item of menus"><a href="#">{{ item.title }}</a></li>
</ul>//在对应html文件的component.ts文件中
interface TopMenu {title: string;link: string;
}  //ts接口这部分我还没理解到位，以后理解了会回来补充的！
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent {title = '这是第一个angular项目';menus: TopMenu[] = [{title: '热门',link: ''},{title: '男装',link: ''},{title: '热门',link: ''}];}
//在对应的html文件的scss文件中
ul li{display:inline-block;margin:0 5px;a{text-decoration:none;}
}

循环出来的效果如下：

上面的例子很好理解，然后说一些可能会用到的东西

//index是索引
//first是第一个（返回布尔值）
//last是最后一个（返回布尔值）
//奇数和偶数（在使用的时候记住数组的索引第一个是0）
//提升性能：trackBy（目前不了解）<ul><li *ngFor="let item of menus; let i = index; let first = first; let last = last; let even = even; let odd = odd"><a href="#">{{ item.title }}</a>{{index}}//举例</li>
</ul>

二、事件的处理和样式绑定

<ul><li *ngFor="let item of menus; let i = index; let first = first; let last = last; let even = even; let odd = odd"><a href="#" [class.active]="selectedIndex === i " (click)="selectedIndex = i">{{ item.title }}</a></li>
</ul>

方括号是数据绑定
圆括号用于事件绑定

创建组件：
在src/app的终端下
在例子中我创建了一个名叫ScrollableTab的组件

ng g c ScrollableTab

封装组件总结：
1.封装组件的意义：方便维护，简化逻辑。
2.语法：ng generate component 组件名（驼峰形式）
可简写为 ng g c 组件名
当我创建一个组件的时候，不仅仅添加了上面图片中的4个文件，还更新了一个文件 app.module.ts

三、ngIf指令

<div *ngIf="条件表达式">
</div><div *ngIf="条件表达式"else elseContent>
为真显示
</div>
<ng-template #elseContent>
为假显示
</ng-template>

四、组件的输入输出
父给子：@Input 属性绑定
子给父：@Output 事件绑定

---

angular的管道：
类似于vue中的过滤器，我可以把数据进行一些修改，比如时间显示的格式或者是根据字段显示不同的文字这些操作。（个人理解，不严谨欢迎指正～）
如何使用管道：
下载

ng g pipe pipe-name

成功后会出现两个文件:

       pipe-name.pipe.spec.ts   //测试pipe-name.pipe.ts     //用来写自定义pipe

pipe-name.pipe.ts文件中：transform(value: any，args?: any):any{//transform是方法名//第一个参数value 是带过滤的内容//第二个参数是第一个参数处理的条件，也就是参数}

实际举一个例子

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'filter'  //在模板中绑定时使用的管道名。 通常使用 lowerCamelCase 拼写方式，因为名字中不允许包含减号（-）
})
export class FilterPipe implements PipeTransform {transform(subject: any, cource: any): any {if (!cource) {return subject;}return subject.filter(function (subjects) {return subjects.toLowerCase().includes(cource.toLowerCase());   //实现模糊查询});}
}

相关api请查看ng官网
ng官网pipe部分