按钮单击在数据表引导离子 3 中不起作用



>我使用引导程序在数据表中创建。我在离子3网站上使用了数据表。但是问题是我在数据表中使用了编辑按钮然后第一次它工作得很好.搜索记录后,它不能工作单击,也不能调用方法。我卡住了,请帮我解决这个问题。

分支.html

<ion-content class="bgimg">
  <ion-grid style="color: aliceblue">
    <ion-row>
      <ion-col col-8></ion-col>
      <!--<ion-col col->-->
      <!--</ion-col>-->
      <ion-col col-2> <button float-end ion-button outline color="editcolor" style="color: white" (click)="addbranch()">Add</button></ion-col>
      <ion-col col-1></ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-2></ion-col>
      <ion-col col-8>
        <div *ngIf="checkdatatable">
          <table id="example12">
            <thead>
            <tr>
              <th text-capitalize style="border: 1px solid rgba(255,255,255,1);" width="20%">Image</th>
              <th style="border: 1px solid rgba(255,255,255,1);">name</th>
              <th style="border: 1px solid rgba(255,255,255,1);">address</th>
              <th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
              <th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
              <th  style="border: 1px solid rgba(255,255,255,1);" text-capitalize>Action</th>
            </tr>
            </thead>
            <tfoot>
            <tr >
              <th text-capitalize style="border: 1px solid rgba(255,255,255,1);">Image</th>
              <th style="border: 1px solid rgba(255,255,255,1);">name</th>
              <th style="border: 1px solid rgba(255,255,255,1);" width="15%">address</th>
              <th style="border: 1px solid rgba(255,255,255,1);" >phone</th>
              <th style="border: 1px solid rgba(255,255,255,1);" >pincode</th>
              <th  style="border: 1px solid rgba(255,255,255,1);" text-capitalize width="20%">Action</th>
            </tr>
            </tfoot>
            <tbody>
              <tr style=" background:rgba(0,0,0,0.0); color: white;font-size: 16px" *ngFor="let item of branchlist" >
              <td style="border: 1px solid rgba(255,255,255,0.5);">
                <img src="{{item.image}}" height="100px">
              </td>
              <td style="border: 1px solid rgba(255,255,255,0.5);">{{item.name}}</td>
              <td style="border: 1px solid rgba(255,255,255,0.5);">{{item.address}}</td>
              <td style="border: 1px solid rgba(255,255,255,0.5);">{{item.phone}}</td>
              <td style="border: 1px solid rgba(255,255,255,0.5);">{{item.pincode}}</td>
              <td style="border: 1px solid rgba(255,255,255,0.5);">
                <!--<input type="hidden" id="idmain" value="{{item._id}}">-->
                <button color="editcolor"  ion-button (click)="updatebranch(item._id)">Edit</button>
                <button color="deletecolor"  ion-button (click)="deletebranch(item._id)">Delete</button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </ion-col>
      <ion-col col-2></ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

分支.ts

import { Component } from '@angular/core';
import {
  AlertController, IonicPage, LoadingController, NavController, NavParams, ToastController, ModalController,
  App
} from 'ionic-angular';
import {WebserviceallProvider} from "../../providers/webserviceall/webserviceall";
import { Storage } from '@ionic/storage';
import {LoginPage} from "../login/login";
/**
 * Generated class for the BranchesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-branches',
  templateUrl: 'branches.html',
})
export class BranchesPage {
  resposnsdata:any;
  branchlist:any;
  checkdatatable:boolean=false;
  branchname = {name:''};
  branchupdatedata = {name:''};
  constructor(private storage: Storage,private app:App,public modalCtrl: ModalController,private alertCtrl: AlertController,private calldata:WebserviceallProvider,public navCtrl: NavController, public navParams: NavParams,public loadingCtrl: LoadingController,private toastCtrl: ToastController)
  {
    storage.get('token').then((val) => {
      console.log('Your Token is', val);
      if(val === null || val === "non")
      {
        this.app.getRootNav().setRoot(LoginPage);
      }
    });
      this.getshow();
  }
  ionViewEnter(){
    this.getshow();
  }
 myFunction(name) {
    document.getElementById("demo").innerHTML =
      "Welcome " + name;
  }
  getshow(){
    //this.presentLoading();
    this.calldata.branchlist().then((result) => {
      this.branchlist = [];
      this.resposnsdata = result;
      console.log(this.resposnsdata);
      this.branchlist = this.resposnsdata.data;
      $(document).ready(function () {
        // alert("call aklsdaklsd");
        $('#example12').DataTable();
       
      });
      this.checkdatatable=true;
      //check user name
      //console.log("print login Response >>"+this.resposnsdata);
      if (this.resposnsdata.status === 200) {
      }
      else
      {
        this.presentToast(this.resposnsdata.message);
      }
    }, (err) => {
      console.log("Error Block Call");
      this.presentToast("Server Problem");
    });
  }
  presentLoading() {
    let loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 2000
    });
    loader.present();
  }
  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 2000,
      position: 'bottom'
    });
    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });
    toast.present();
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad BranchesPage');
  }
  deletebranch(bid){
    console.log(bid);
    //this.presentLoading();
    this.calldata.branchdelete(bid).then((result) => {
      this.resposnsdata = result;
      console.log(this.resposnsdata);
      this.getshow();
      //check user name
      //console.log("print login Response >>"+this.resposnsdata);
      if (this.resposnsdata.status === 200) {
      }
      else
      {
        this.presentToast(this.resposnsdata.message);
      }
    }, (err) => {
      console.log("Error Block Call");
      this.presentToast("Server Problem");
    });
  }
  addbranch() {
    var modalPage = this.modalCtrl.create('MAddbranchPage');
    modalPage.present();
    modalPage.onDidDismiss(data=>{
      this.getshow();
    });
  }
  updatebranch(id){
    console.log("edit call");
    var dataid = {
      bid:id
    };
    var modalPage = this.modalCtrl.create('MEditbranchPage',{data:dataid});
    modalPage.present();
    modalPage.onDidDismiss(data=>{
      this.getshow();
    });
  }
}

Cordova中仅支持离子按钮,换句话说,您必须为浏览器启用Cordova或只是简单地删除离子按钮

<button color="editcolor" (click)="updatebranch(item._id)">Edit</button>
<button color="deletecolor" (click)="deletebranch(item._id)">Delete</button>

相关内容

  • 没有找到相关文章

最新更新