Angluar5+ionic3实践(二)

Timor

背景: 昨天看了一天的别人的代码.整理了一下接口所需的二十多个参数.今天联调.把用到的一些方法记录一下.

先看下两个常用的方法:ArrayStringStringArray.
  • Array.join(',')代表把Array拆成一组字符串,用,分割
  • String.split(',')代表把String组成一个数组,用,分割.

例如 :
image.png

<ion-input>属性值placeholder的展示内容
  • 在输入字段为空时显示.业务需求需要区分编辑中和详情页.所以需要处理下.原来用React的写法是在等号后面直接写{ }判断.
  • Angluar这里不行.需要把placeholder[ ]包起来.然后在后面的" "里面写判断条件.

例如 :

<ion-item>
 <ion-label class="font-15">银行联行号</ion-label>
     <ion-input 
        [(ngModel)]="clientSpeakerRequest.bankBranchNumber"
        [placeholder]="editable ? '请填写' : '' " 
        [readonly]="!editable" 
        type="number"
     >
     </ion-input>
 </ion-item>
在HTML页面中可以直接修改model的值
  • 需求是在点击编辑按钮的时候把按钮状态给取反
  • 我看之前别人的写法是写个点击方法,然后在model的点击方法里面再去写this.isEdit = !this.isEdit.
  • 我以为是必须要那样写.. 结果今天发现可以这样.直接修改.操作少的时候,这样写特别方便.
<ion-buttons end>
     <button 
         *ngIf="!isEdit && type === 'talker'" 
         ion-button 
         icon-only 
         (click)="this.isEdit = !this.isEdit;"
     >编辑</button>
 </ion-buttons>

监听请求结果的subscribe方法

  • 在请求成功的时候获取接口返回值.
  • 在请求失败的时候打印错误提示语.
this.http.get(`api/clientSpeaker/GetStaffRepInstitutionSimplePageData?access_token=${token}&staffId=${this.TerritoryID}`, httpOptions)
 .subscribe(
 (res: any) => {
    console.log('res',res)
 },
 (err) => {
    this.alertService.presentAlert("提示", `${err.message}`);
 }
 );
总结:

今天大部分时间都在联调接口.后端要求的传参格式都不一样.所以页面存取值一直在调试.这里记一下今天用到的一些方法.加油!

阅读 468
37 声望
18 粉丝
0 条评论
37 声望
18 粉丝
文章目录
宣传栏