2017-02-22 49 views
0

我正在使用Ionic 2.0應用程序編輯列表。我已經掌握了90%的方法,但我很難找到可能相當容易的事情。Ionic 2.0列表編輯 - 預填充警報字段

當用戶單擊列表項的編輯按鈕時,它將使用以下腳本來顯示警報。但是,我希望列表項的當前名稱在編輯時在預警字段內預先顯示。我似乎無法弄清楚如何做到這一點。

腳本:

editSupplier(supplier){ 
    let prompt = this.alertCtrl.create({ 
     title: 'Edit Supplier', 
     inputs: [{ 
      name: 'title', 
      value: // dynamic value should go here 
     }], 
     buttons: [ 
      { 
       text: 'Cancel' 
      }, 
      { 
       text: 'Save', 
       handler: data => { 
        let index = this.suppliers.indexOf(supplier); 

        if(index > -1){ 
         this.suppliers[index] = data; 
        } 
       } 
      } 
     ] 
    }); 

    prompt.present();  

} 

產品編號:

<ion-item-sliding *ngFor="let supplier of suppliers"> 
     <ion-item> 
      <h2 color="dark">{{supplier.title}}</h2> 
     </ion-item> 
     <ion-item-options side="right"> 
      <button ion-button (click)="editSupplier(supplier)" color="attention"> 
      <ion-icon name="create"></ion-icon> 
      </button> 
      <button ion-button (click)="deleteSupplier(supplier)" color="danger"> 
      <ion-icon name="trash"></ion-icon> 
      </button> 
     </ion-item-options> 
    </ion-item-sliding> 

回答

0

嘗試

editSupplier(supplier){ 
let prompt = this.alertCtrl.create({ 
    title: 'Edit Supplier', 
    inputs: [{ 
     name: 'title', 
     value: this.supplier.title 
    }], 
    buttons: [ 
     { 
      text: 'Cancel' 
     }, 
     { 
      text: 'Save', 
      handler: data => { 
       let index = this.suppliers.indexOf(supplier); 

       if(index > -1){ 
        this.suppliers[index] = data; 
       } 
      } 
     } 
    ] 
}); 

prompt.present();  

} 
+0

不幸的是,這是行不通的。實際上我已經嘗試了這個解決方案的一些變化。在構建時,它會引發TypeScript錯誤「屬性'供應商'在類型'SuppliersPage'上不存在。」 – designcouch

0

好了,我已經想通了這一點。我添加到父組的引用(供應商),然後捕獲的特定供應商的類似這樣的索引:

let currentIndex = this.suppliers.indexOf(supplier); 

我再換成代碼的與此有關的「價值」行:

value: this.suppliers[currentIndex].title 

和Bob的你的叔叔,警報字段是預先填充的。