mardi 28 novembre 2017

ionic - empty button because of a checkbox

Since a ngIf and a ngFor cannot cohabit, I put a ng-container to make the loop. But sinci I did that anything isn't working without any logic. Here is the code :

view

<ion-list *ngIf="listfavoris else loading">
    <ng-container *ngFor="let favoris of listfavoris">
      <button ion-item ion-long-press [interval]="500" (onPressing)="showModeCheckList(favoris)" (click)="openDocument(favoris)" *ngIf="favoris.shouldbedisplayed || ModeCheckList">
        <h2></h2>
        <h3></h3>
        <p *ngIf="favoris.Synchro == 1"><ion-icon name="sync" color="vert"></ion-icon> Dernière synchronisation le </p>
        <p *ngIf="favoris.Synchro == 0">Pas synchronisé</p>
        <ion-checkbox color="bleu" item-right [checked]="favoris.Checked" (ionChange)="toggleFavoris(favoris)"  *ngIf="ModeCheckList"></ion-checkbox>
      </button>
    </ng-container>
  </ion-list>

controller

    showModeCheckList(favoris:FavorisModel) {
        this.vibration.vibrate(100);
        this.ModeCheckList = true;
        this.toggleFavoris(favoris);
    }

    toggleFavoris(favoris: FavorisModel): void {
        favoris.Checked = !favoris.Checked;
        if (favoris.Checked) {
            this.NbFavorisSelect++;
        }
        else {
            this.NbFavorisSelect--;
        }
    }

Some buttons should be displayed at any time and some other should be displayed only in ModeCheckList.

  • If I let the code like that, buttons that should be displayed are always displayed correctly, but when I enter the ModeCheckList, the newly displayed buttons are empty (h2 not showing...) only an empty button with the checkbox appears

  • If I remove the checkbox completely, all elements are correctly displayed at any time (but I need the checkbox)

  • If I remove the ngif and put the ngfor in the button tag, the problem dissapears (but I need the ngif)

  • I cannot put ngif outside the ngfor because the test is about current loop element.

  • If I remove only the ngif from the checkbox, all elements are empty and when I enter the ModeChecklist, I get this error

    ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'

  • If I remove ngif and ion-change from the checkbox, all elements are always empty buttons

I don't understand anything, what's the problem with the checkbox ?




Aucun commentaire:

Enregistrer un commentaire