【angular】開發一個新頁面
前言
開發一個新頁面途中,總結的一些經驗。
頁面效果
功能1:查詢簽到/未簽到結果
功能2:模糊查詢
功能3:修改狀態
經驗總結
【引入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="姓名/學號"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");
逐步列印分析。
小結:
自己去多試試,試不出來,多多請教大神,收穫多多~