2017-02-22 50 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的你的叔叔,警报字段是预先填充的。