【angular】开发一个新页面
前言 开发一个新页面途中,总结的一些经验。 页面效果 功能1:查询签到/未签到结果
功能2:模糊查询
功能3:修改状态
经验总结 【引入primeng】 参考:大神博客、primeNG官网 具体使用: 当需要一个控件来满足我的需求页面的时候,我可以去primeNG里面找一些差不多的控件来改装成自己想要的效果。 比如,我的功能1,用到了2个控件。
① 其中:控件1是TabView 官网效果:
官网讲解了如何使用:
②控件2,:用的是ListBox,嵌入到了控件1中。 官网效果:
根据官网的文档来编写自己需要的效果。
【angular代码经验】 1、引入primeNG或其他需要的服务 在最近的module里面引入:
2、ngSwitch的使用
其中:isSearch是在ts里面定义并赋值的。
3、 双向绑定:【(ngModel)】 比如:获取input搜索框中的值
<
input
id=
"input"
type=
"text"
placeholder=
"姓名/学号"
pInputText [(
ngModel)]=
"input"
/>
ts中:input:string; 其中注意:必须要先引入 import { FormsModule } from '@angular/forms';
4、html向后台传值(感谢雪芬美女)
可以直接在click方法里面吧html里面能获取到的值传入后面就行,在ts中:
5、http传值 get onChange(myID:string){ this.myStudentId=myID; this.display=true; //查询所有签到状态 let getStudent="sign-web/sign/findSignStatus"; this.http.get(getStudent).subscribe( res => { if (res.json().code == "0000" && res.json().data.length != 0) { var data=res.json().data; this.allState=data; console.log(JSON.stringify(this.allState)+"这是所有的状态"); } } ); } post:
let getStudent="sign-web/studentSign/updateSignState/"+this.myStudentId+"/"+this.signID+"/"+id; this.http.post(getStudent,"").subscribe( res => { if (res.json().code == "0000") { this.msgs=[{ severity:'success',summary:'提示',detail:'修改成功!' }] this.display=false; } } ); 假数据: let getStudent="../../assets/mock-data/mystudent.json"; 直接把真实的url换成假数据的地址(先引入)就可以用了。 6、解析返回结果json:[]代表数据,{}代表对象。感谢刚鹏大神! 例如: console.log(JSON.stringify(res.json().data.unFinish)+"888");或者 var data=res.json(); console.log(data[0].unFinish[0].signStatusId+"666666"); 逐步打印分析。 小结: 自己去多试试,试不出来,多多请教大神,收获多多~ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |