Angular 第一个demo之水果分类

关于Angular开发环境 ，配置啥的我就不一一介绍了，详情请移步步：https://www.angular.cn/guide/quickstart

创建应用，打开项目大概就是这么个样子：

1.数组展示：

咱先创建个component的水果类来装页面哈

css样式我就去喵了一眼，最重要的还是交互吧，开始代码了。

导入一个水果模型，然后在ts创建一个属性好让html来展示

说一下这个鬼 *ngFor="let fruit of fruits"   

官方说 *ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。 我理解的就是一个for循环，取值进行展示  let  of 

当然在app.module上还需要导入这个水果类

运行出来就是这个喔：

2.接下来咱在来实现个点击水果显示详情

a.修改水果html页面 *ngIf  是否，真的时候就执行下面的语句，否则过滤掉这段

b.实现方法

在路由里写好路径就可直接运行看效果咯。

简易版水果demo就搞定了。

简易demo app的文件  地址: https://pan.baidu.com/s/18JbuCWKF_a9vsHKjQC7RXg 提取码: u9y7