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

               逐步打印分析。

  小结：

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