Question

我的复选框需要2次点击才能取消选中。我在所有7个复选框中都有这个问题。要选中这些框，只需单击一下即可。

我没有onchange()功能或TS中没有其他功能。 ................................................... ................................................... ................................................... .......

import { Component, OnInit, Inject } from '@angular/core';
import { PHPAPIService } from '../../php-api.service';
import * as socketIO from 'socket.io-client';
import {MatTableModule} from '@angular/material/table';
import * as $ from 'jquery';
import { ToastrService } from 'ngx-toastr';

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

export interface DialogData {
  name: string;
}

@Component({
  selector: 'app-module',
  templateUrl: './module.component.html',
  styleUrls: ['./module.component.css'],
  providers: [PHPAPIService]
})
export class ModuleComponent implements OnInit {

toastChanges = 0;
xForToastMSG = 1;
moduleTimer = [];
  
  fileToUpload: File = null;

  moduleExpandState = [];

  constructor(public PHPAPIService:PHPAPIService,  private toastrService: ToastrService, public dialog: MatDialog) { 
  }
 
  ngOnInit() {
    for(var i=0;i<1000;i++)
      this.moduleExpandState[i] = false;

	this.PHPAPIService.get("tprofile").subscribe(
      (data) =>  this.PHPAPIService.profiles = data
    );
    this.PHPAPIService.get("ttimer").subscribe(
      (data) => this.PHPAPIService.timers = data
    );
    this.PHPAPIService.get("tmodule").subscribe(
      (data) => this.PHPAPIService.modules = data
    );


    const socket = socketIO(this.PHPAPIService.apiUrl);
  	socket.on('tmodule', (snapshot) => this.PHPAPIService.modules = snapshot);
    socket.on('timeUpdate', (snapshot) => this.PHPAPIService.date = snapshot);


      setTimeout(()=>{
      for(var i=0; i< this.PHPAPIService.modules.length ;i++){
        /*Konvertiert die einelenen Daten HH  und MM in ein String HH:MM*/
        this.moduleTimer[i] = this.PHPAPIService.modules[i].time_h + ":" + this.PHPAPIService.modules[i].time_m;
        //console.log(this.localTimerVar[i].on);
      }
  },1200);
    //socket.on('tmodule', () => this.showSuccess()); 
  }

/*  showSuccess(text) {
/*    if(this.xForToastMSG == 1){
      this.xForToastMSG = 0;*/
   //   this.toastrService.success(text,'',{
 //       positionClass: 'toast-bottom-right'
 //     });
   /*   this.toastChanges = 1;*/
//    }
/*    setTimeout(()=>{
      this.toastChanges = 0;
      this.xForToastMSG = 1;
    },500);*/
  //}*/

  showWarning(text) {
    this.toastrService.warning(text,'',{
      positionClass: 'toast-bottom-right'
    });
  }
/*  showDownload() {
      this.toastrService.success('Datensicherung wird erstellt','',{
        positionClass: 'toast-bottom-right'
      });
  }*/

/*NUR FÜR MEHERERE FILES*/
/*handleFileInput(files: FileList) {
  // console.log("TEST");
   this.fileToUpload = files.item(0);
   this.uploadFileToActivity();
}
*/


uploadFileToActivity(files: FileList) {
  this.fileToUpload = files.item(0);
  console.log(files.item(0));

  if(files.item(0).name.substring(0,6) === 'module'){
    this.PHPAPIService.uploadBackupModule(files.item(0)).subscribe(data => {
    // do something, if upload success
      this.showSuccess('Import erfolgreich!');
      console.log(data);
    }, error => {
      console.log(error);
    });
  }else{
     this.showWarning('fehlerhafte Datei');
  }
  }


  backupModule(m_id, m_name){
    this.showSuccess('Datensicherung wird erstellt');
    this.PHPAPIService.backupModule(m_id, m_name).subscribe(response => this.downLoadFile(response.text(), "application/plain", m_name));
  }

  downLoadFile(data: any, type: string, name) {
      var blob = new Blob([data], { type: type});
      var url = window.URL.createObjectURL(blob);
   //   var pwa = window.open(url);  

      var anchor = document.createElement("a");

      anchor.setAttribute("type", "hidden"); // make it hidden if needed
      anchor.download = "module_"+name+".sql";
      anchor.href = url;
      document.body.appendChild(anchor);
      anchor.click();
      anchor.remove();
      /*if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
          alert( 'Please disable your Pop-up blocker and try again.');
      }*/
  }

  showSuccessNoChanges() {
    this.toastrService.warning('keine Änderungen','',{
      positionClass: 'toast-bottom-right'
    });
  }

   showSuccess(x){
     console.log(this.PHPAPIService.modules[x].time_h);
     if(this.PHPAPIService.modules[x].time_h != '' && this.PHPAPIService.modules[x].time_m != ''){
        this.toastrService.success('Änderung gespeichert','',{
            positionClass: 'toast-bottom-right'
        });
      }else{
        this.toastrService.error('Bitte Zeit eintragen','',{
            positionClass: 'toast-bottom-right'
        });
      }

      if(x == "zeit verfügbar"){
         this.toastrService.error('Zeit bereits verfügbar','Die eingetragene Zeit ist bereits in einem andern Modul verfügbar, bitte eine andere Uhrzeit eintragen.',{
            positionClass: 'toast-bottom-right'
        });
      }

  }

  togglePanel(x){
    this.moduleExpandState[x] = !this.moduleExpandState[x];
    $('#nameInput-'+x+' ').toggleClass('inputEdit');
  }

   saveModule(mID, x){
      if(this.PHPAPIService.modules[x]['0'] == false) this.PHPAPIService.modules[x]['0'] = "";
      if(this.PHPAPIService.modules[x]['1'] == false) this.PHPAPIService.modules[x]['1'] = "";
      if(this.PHPAPIService.modules[x]['2'] == false) this.PHPAPIService.modules[x]['2'] = "";
      if(this.PHPAPIService.modules[x]['3'] == false) this.PHPAPIService.modules[x]['3'] = "";
      if(this.PHPAPIService.modules[x]['4'] == false) this.PHPAPIService.modules[x]['4'] = "";
      if(this.PHPAPIService.modules[x]['5'] == false) this.PHPAPIService.modules[x]['5'] = "";
      if(this.PHPAPIService.modules[x]['6'] == false) this.PHPAPIService.modules[x]['6'] = "";

      if(this.PHPAPIService.modules[x]['0'] == true) this.PHPAPIService.modules[x]['0'] = "checked";
      if(this.PHPAPIService.modules[x]['1'] == true) this.PHPAPIService.modules[x]['1'] = "checked";
      if(this.PHPAPIService.modules[x]['2'] == true) this.PHPAPIService.modules[x]['2'] = "checked";
      if(this.PHPAPIService.modules[x]['3'] == true) this.PHPAPIService.modules[x]['3'] = "checked";
      if(this.PHPAPIService.modules[x]['4'] == true) this.PHPAPIService.modules[x]['4'] = "checked";
      if(this.PHPAPIService.modules[x]['5'] == true) this.PHPAPIService.modules[x]['5'] = "checked";
      if(this.PHPAPIService.modules[x]['6'] == true) this.PHPAPIService.modules[x]['6'] = "checked";

      /*checke ob gleiche Uhrzeiten verfügbar sind*/
      /*for(var i = 0; i < this.PHPAPIService.modules.length+1; i++){
        console.log(this.moduleTimer[x]);
        console.log(this.PHPAPIService.modules[x].time_h+":"+this.PHPAPIService.modules[x].time_m);
        if(this.PHPAPIService.modules[i].time_h+":"+this.PHPAPIService.modules[i].time_m == this.moduleTimer[x]){
           this.showSuccess("zeit verfügbar");
           return null;
        }
      }*/

      /*Konvertiert den 19:45 String in  19 und 45*/
      
 
   	 //console.log(this.PHPAPIService.modules[x]);
      if(this.PHPAPIService.modules[x].m_active == false){
        this.PHPAPIService.modules[x].m_active = "";
       
      }

      if(this.PHPAPIService.modules[x].m_active == true){
        this.PHPAPIService.modules[x].m_active = "checked";
       // this.PHPAPIService.saveModule(mID, this.PHPAPIService.modules[x]).subscribe();  
      }
      
      if(this.moduleTimer[x] != ''){
        this.PHPAPIService.modules[x].time_h = this.moduleTimer[x].split(":")[0];
        this.PHPAPIService.modules[x].time_m = this.moduleTimer[x].split(":")[1];
      }
      
       if(this.PHPAPIService.modules[x].time_h != '' && this.PHPAPIService.modules[x].time_m != ''){
      
           this.PHPAPIService.saveModule(mID, this.PHPAPIService.modules[x]).subscribe(); 
        }


      setTimeout(()=>{
    
       // if(this.toastChanges != 1){
          this.showSuccess(x);
//    };
      },200);
  	       
    }

     deleteModule(mID, x){
          const dialogRef = this.dialog.open(DialogOverviewModule, {
          width: '250px',
          data: {name: this.PHPAPIService.modules[x].m_name}
        });

        dialogRef.afterClosed().subscribe(result => {
          console.log(result);
          if(result == true){
           this.PHPAPIService.deleteModule(mID).subscribe();
          }
        });



      //this.PHPAPIService.deleteModule(mID).subscribe();
     // this.PHPAPIService.profiles[x] = null;
    }

    addModule(){
      this.PHPAPIService.addModule().subscribe();
      for(var i=0;i<1000;i++)
        this.moduleExpandState[i] = false;
     // this.PHPAPIService.profiles[x] = null;
    }


}


@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewModule {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewModule>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  save = true;

  onNoClick(): void {
    this.dialogRef.close();
  }

}

h1{
	display: block;
	margin: 0;
	
	padding: 20px;
	padding-left: 220px;
}
h4{
	margin: auto 0px;
	padding: 0;
	font-weight: 200;
	padding-right: 50px;
}
h2{
	margin: 10px; 
	font-weight: 100;
}
header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0;
	margin-left:200px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #323741;
	color: #D7E2F7;
}

input[type="file"] + label {
	margin: 0;
	padding: 0;
}

/*input[type="file"]:focus + label,
input[type="file"] + label:hover {
    background-color: red;
}*/
input[type="file"]{
	float: right;
	margin: 20px;
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.modSelect, .modSelect option{
	font-size: 1.2em;
	width: 250px !important;
}

input{
	height: 30px;
	outline: none;
	border: none;
	background: transparent;
	font-size: 1.2em;
}

input:focus{
	background: white;
	outline: none;
	border: solid 1px black;
}

input[type="checkbox"]{
	margin: auto 0px;
	margin-left: 10px;
	width: 18px;
}

/deep/ .mat-expansion-panel-header{
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	margin-left:200px;
}

.row_expansion_column{
	display: flex;
	flex-wrap: nowrap;	
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-grow: 0;
	text-align: center;
	margin-left:200px;
}

.row_expansion_column select{
	margin: 10px;
	width: 100px;
}
.delBtn{
	background-color: #ed1212;
	border: 1px solid #ed1212;
	font-size: 1.2em;
	color: white;
}
.saveBtn{
	background-color: green;
	border: 1px solid green;
	font-size: 1.2em;
	color: white;
}
.exportBtn{
	background-color: #707070FF;
	border: 1px solid #707070FF;
	font-size: 1.2em;
	color: white;
}

.addBtn{
	background-color: #707070FF;
	border: 1px solid #707070FF;
	float: right;
	margin: 20px;
	padding: 0 10px;
	font-size: 1.2em;
	color : white;
}

.importBtn{
	background-color: #707070FF;
	border: 1px solid #707070FF;
	float: right;
	margin: 20px;
	padding: 0;
	font-size: 1.2em;
	color : white;
}

.fileBtn{
	background-color: #707070FF;
	border: 1px solid #707070FF;
	float: right;
	padding: 0px 20px;
	font-size: 1em;
	color : white;
	line-height: 34px;
	cursor: pointer;
}


.editBtn{
	margin: 0 0 0 auto;
	//background-color: #DADADAFF;
	border: 1px solid #707070FF;
	color : #707070FF;
	padding: 2px 10px 2px 10px; 
	font-size: 1.2em;
}



input[type="text"]{
	outline: none;
	border: none;
	background: transparent;
	height: 30px;
	font-size: 1.2em;
	pointer-events: none;
}

input[type="text"]:hover{
	cursor: default;
	pointer-events: none;
}

input[type="text"].inputEdit:hover{
	pointer-events: auto;
	outline: none;
	cursor: text;
	border: 1px solid #707070FF;
}

input[type="text"].inputEdit{
	background: white;
	pointer-events: auto;
	outline: none;
	cursor: text;
	border: 1px solid #707070FF;
}

img{
	width: 120px;
	position: absolute;
	right: 20px;
	bottom: 20px;
}

/deep/ .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
	background-color: blue;
	float: right;
}
/deep/ .mat-slide-toggle.mat-warn.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background-color: rgba(124, 172, 249,.5);
    float: right;
}
/deep/ .mat-slide-toggle{
	position: relative;
    top: 15px;
    padding-right: 10px;
    margin-left: 20px;
}

/deep/ .mat-slide-toggle-bar {
  height: 15px !important;
  width: 40px !important;
}

/deep/ .mat-slide-toggle-thumb {
  height: 25px !important;
  width: 25px !important;
  background-color: #ececec;
  margin-left: -2px;
  margin-top: -2px;
}
/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(23px,0,0) !important;
}

.seperateContainer{
	padding-left: 20px;
	display: inherit;
	background-color: #f5f5f5;
}

#modAct{
	margin-left: 20px;
}

@media only screen and (max-width: 600px) {
	
	header h2{
		padding-left: 20px;
	}

	.row_expansion_column{
		margin-left:0px;
	}

	/deep/ .mat-expansion-panel-header{
		margin-left:0px;
	}

	header{
		margin-left:0px;
	}

}

<header>
  <h2>Module</h2>
  <h4 [(ngModel)]="PHPAPIService.date" ngDefaultControl>
      {{PHPAPIService.date | date:'HH:mm:ss     dd.MM.yyyy'}}
  </h4> 
</header>

<mat-expansion-panel *ngFor="let module of PHPAPIService.modules; let x = index" [expanded]="moduleExpandState[module.m_id]" 
  [disabled]="true">
  <mat-expansion-panel-header>
    <input type="text" name="" id="{{ 'nameInput-' + module.m_id }}" placeholder="Bezeichnung"
      required [(ngModel)]="module.m_name" [value]="module.m_name"/>
     <button mat-button class="editBtn" (click)="togglePanel(module.m_id)">Bearbeiten</button>
  </mat-expansion-panel-header>
  <div class="row_expansion">
    <div class=row_expansion_column>
    	<h3>Profil</h3>
      <select class="modSelect" required [(ngModel)]="module.m_profile">
          <option [value]="profile.profileID" *ngFor="let profile of PHPAPIService.profiles">{{profile.Name}}</option>
        </select>
        <h3>schaltetzeit</h3>
      <input type="time" name="" required [(ngModel)]="moduleTimer[x]" value="{{module.time_h}}:{{module.time_m}}"/>
        <div class="seperateContainer">
	        <div class="dayCheckBox"><h3>MO</h3>
	      	 <input type="checkbox" required [(ngModel)]="module['1']" checked="{{module['1']}}"/> <!-- timer.1 funktiniert nicht, DB hat leider 0 - 7 als spalten -->
	        </div>
	         <div class="dayCheckBox"><h3>DI</h3>
	      	<input type="checkbox" required [(ngModel)]="module['2']" checked="{{module['2']}}"/></div>
	         <div class="dayCheckBox"><h3>MI</h3>
	      	<input type="checkbox" required [(ngModel)]="module['3']" checked="{{module['3']}}"/></div>
	         <div class="dayCheckBox"><h3>DO</h3>
	      	<input type="checkbox" required [(ngModel)]="module['4']" checked="{{module['4']}}"/></div>
	         <div class="dayCheckBox"><h3>FR</h3>
	      	<input type="checkbox" required [(ngModel)]="module['5']" checked="{{module['5']}}"/></div>
	         <div class="dayCheckBox"><h3>SA</h3>
	      	<input type="checkbox" required [(ngModel)]="module['6']" checked="{{module['6']}}"/></div>
	         <div class="dayCheckBox"><h3>SO</h3>
	      	<input type="checkbox" required [(ngModel)]="module['0']" checked="{{module['0']}}"/></div>
	      </div>
        <h3 id="modAct">Active</h3>
        <mat-slide-toggle [(ngModel)]="module.m_active" color="warn" 
          [checked]="module.m_active"></mat-slide-toggle>
    </div>
  </div>
  <mat-action-row>
    <button mat-button class="exportBtn" (click)="backupModule(module.m_id, module.m_name)">Export</button>
    <button mat-button class="delBtn" (click)="deleteModule(module.m_id, x)">Löschen</button>
    <button mat-button class="saveBtn" (click)="saveModule(module.m_id, x)">Speichern</button>
  </mat-action-row>
</mat-expansion-panel>

<button mat-button class="addBtn" (click)="addModule()">neues Modul erstellen</button>
<!-- <div class="form-group"> -->
<!-- <button mat-button class="fileBtn"> <label for="file">Datei auswählen</label></button> -->

<input type="file"
     class="inputfile"
     enctype="multipart/form-data"
       id="file"
       name="filetoupload"
       (change)="uploadFileToActivity($event.target.files)" >
       <button mat-button class="importBtn"  ><label for="file"class="fileBtn">Import</label></button> 
       <!-- <label for="file"class="fileBtn">Import</label> -->
<!--   </div> -->

Answer 1

您不需要 checked =“ {{module ['1']}}”“ ，数据绑定正在处理该问题。因此，请从您的复选框中删除以下代码，它将起作用。

checked =“ {{module ['1']}}}”“ //删除此

让我知道您是否需要完整的代码，我可以分享。在下面的存储库中检查运行代码。 https://stackblitz.com/github/nitin1982/StackOverFlowProblems/tree/master/CheckBoxIssue?file=src%2Fapp%2Fapp.component.html

复选框需要单击两次才能取消选中？

1 个答案: