動態

詳情 返回 返回

Angluar5+ionic3實踐(二) - 動態 詳情

背景: 昨天看了一天的別人的代碼.整理了一下接口所需的二十多個參數.今天聯調.把用到的一些方法記錄一下.

先看下兩個常用的方法: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}`);
 }
 );
總結:

今天大部分時間都在聯調接口.後端要求的傳參格式都不一樣.所以頁面存取值一直在調試.這裏記一下今天用到的一些方法.加油!

user avatar codexiaosheng 頭像 snowwolfarden 頭像
點贊 2 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.