1、修改tabs页的图标，关键是 outline
在使用自定义图标的时候，需要修改 /theme/icons.scss 文件，但是如何定义选中前后的分别使用哪个图标呢
定义选中前的状态
.ion-ios-data-outline::before { content: url("../assets/fonts/dataIcon.svg");}
定义选中后的状态
.ion-ios-file:before { content: url("../assets/fonts/fileIcon2.svg");}
2、ts 中获取html 参数的值，segment 是e.value， select是e，不能用e.value
<ion-segment [(ngModel)]="choice" (ionChange)="segmentChanged($event)">
segmentChanged(e) {
if (e.value == "choice1") {
this.clickChart1();
} else if (e.value == "choice2") {
this.clickChart2();
}
}
<ion-select interface="popover" (ionChange)="homeRunChanged($event)">
homeRunChanged(e) {
console.log(e);
this.commonService.home_run(e);
}
3、ts文件中获取map型参数的陷阱
在ts文件中，定义类型 result: any[]，后来赋值 {name:bob}
在ts中使用 result.name，编译报错
该使用 result['name'] 注意有两个单引号
但在html文件中
可以使用result.name， result['name'] 两种方式获取到值，前一种是angular 的方式，后一种是js 的方式
4、先loading，然后alert，使用onDidDismiss方法
let loader = this.loadingCtrl.create({
content: "正在提交",
duration: 3000
});
loader.present();
loader.onDidDismiss(() => {
let toast = this.toastCtrl.create({
message: '非常感谢您帮我们变得更好',
duration: 2000,
position: 'middle'
});
toast.present(toast);
});
也可以手动结束加载 loader.dismiss(); 或 loader.dismissAll(); 然后再alert
5、传来的json数据，如何用到echarts的饼图中
比如json数据，{"message":"ok","result":{"cz":[122.25,160.07,367.37],"industry":["石油加工","化学原料","汽车"]},"status":"200"}
但是在饼图中的数据，必须是 {'name' : '石油加工' ,'value' : 122.25}这种形式
需要添加一个转换方法
chart_data1: any=[];
this.httpApi.get<ResponseType>('/services/ea_AppIndustryStructureService/industryAccProValue?month=201704')
.subscribe(
data => {
let chart_data1_x = data['result']['industry'];
let chart_data1_y = data['result']['cz'];
for (let i = 0; i < chart_data1_x.length; i++) {
this.chart_data1.push({'name': chart_data1_x[i] , 'value': chart_data1_y[i]});
}
console.log(this.chart_data1);
this.clickChart1();
});
6、ngswitch 陷阱
segment 搭配上 ngswitch，可以实现非常好看的页面，但是后来发现也有一些不好的地方
比如下面这个页面中，选项卡 A和B，A中包含了aaa，B中包含了bbb。他们在同一个html页面中，但是在选项卡切换为A时，获取不到bbb元素；选项卡切换为B，获取不到aaa元素。
当时为了实现我的效果，就没有使用ngswitch，而是定义了两个div，一个显示一个隐藏
原创文章，欢迎转载，转载请注明出处！