Angluar5+ionic3实践(二)

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

先看下两个常用的方法:Array转String和String转Array.

• Array.join(',')代表把Array拆成一组字符串,用,分割
• String.split(',')代表把String组成一个数组,用,分割.

例如 :

<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}`);
 }
 );

总结:

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