【angular】开发一个新页面

前言

开发一个新页面途中，总结的一些经验。

页面效果

功能1：查询签到/未签到结果

功能2：模糊查询

功能3:修改状态

经验总结

扫描二维码关注公众号，回复： 1068822 查看本文章

【引入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");

逐步打印分析。

小结：

自己去多试试，试不出来，多多请教大神，收获多多~

【angular】开发一个新页面

猜你喜欢