2
votes

case à cocher sélectionner tout le matériau angulaire

J'essaie d'implémenter la case à cocher Tout sélectionner sur un matériau angulaire. Lorsque l'utilisateur clique sur la case à cocher spécifque (élément), la case à cocher principale doit afficher Indéterminé et passer à cochée si toutes les cases sont cochées. Actuellement, j'ai un comportement étrange. Quelqu'un peut-il me dire où j'ai commis une erreur? Voici stackblitz . Voici mon exemple de code:

app.html

import {
  Component
} from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
})
export class CheckboxConfigurableExample {
  itemsObject = [{
    id: 1,
    val: 'john'
  }, {
    id: 2,
    val: 'jane'
  }];
  selected3 = [];

  toggle(item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    } else {
      list.push(item);
    }
  }

  exists(item, list) {
    return list.indexOf(item) > -1;
  };

  isIndeterminate(x, t) {
    return (x.length !== 0 && x.length !== t.length);
  };

  isChecked(x, t) {
    return x.length === t.length;
  };

  toggleAll(x, t) {
    var l1 = x.length,
      l2 = t.length;
    if (l1 === l2) {
      x.splice(0, l1);
    } else if (l1 === 0 || l1 > 0) {
      //First we need to empty array, because we are using push to fill in array
      x.splice(0, l2);
      t.forEach(y => x.push(y));
    }
  };
}

app.ts

<fieldset class="demo-fieldset">
  <div>
    <mat-checkbox aria-label="Select All" [checked]="isChecked(selected3, itemsObject)" [indeterminate]="isIndeterminate(selected3, itemsObject)" (click)="toggleAll(selected3, itemsObject)">
      Select All list of user (Array of objects) {{isChecked(selected3, itemsObject)}}
    </mat-checkbox>
  </div>
  <div class="demo-select-all-checkboxes" *ngFor="let item of itemsObject">
    <mat-checkbox [checked]="exists(item, selected3)" (click)="toggle(item, selected3)">
      {{ item.val }}
    </mat-checkbox>
    {{exists(item, selected3)}}

  </div>
</fieldset>

Voici mon stackblitz

angular angular-material checkbox

0 commentaires

4 Réponses :

0
votes

Dans votre checkbox-configurable-example.html, vous utilisez:

value="isChecked(selected3, itemsObject)"

J'ai simplement changé cela en:

[checked] = "isChecked(selected3, itemsObject)"

Et il semble comme vous vous y attendez? Je soupçonne que des ajustements supplémentaires sont nécessaires pour l'ensemble du projet, mais cela pourrait vous amener dans la direction?

1 commentaires

Je vois que cela crée d'autres problèmes.

8
votes

Essayez ce code:

Composant:

<fieldset class="demo-fieldset">
  <div>
     <mat-checkbox aria-label="Select All" [checked]="isChecked()" [indeterminate]="isIndeterminate()" (change)="$event ? toggleAll($event) : null">
      Select All list of user (Array of objects) {{isChecked(selected3)}}
    </mat-checkbox>
  </div>
  <div class="demo-select-all-checkboxes" *ngFor="let item of itemsObject">
    <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? toggle(item, $event) : null"
                    [checked]="exists(item)">
      {{ item.val }}
    </mat-checkbox>
    {{exists(item)}}

  </div>
</fieldset>

Modèle:

import {Component} from '@angular/core';
import {

  MatCheckboxChange
} from '@angular/material';

/**
 * @title Configurable checkbox
 */
@Component({
  selector: 'checkbox-configurable-example',
  templateUrl: 'checkbox-configurable-example.html',
  styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
  itemsObject = [{
    id: 1,
    val: 'john'
  }, {
    id: 2,
    val: 'jane'
  }];
  selected3 = [];

  toggle(item,event: MatCheckboxChange) {
     if (event.checked) {
      this.selected3.push(item);
    } else {
      const index = this.selected3.indexOf(item);
      if (index >= 0) {
        this.selected3.splice(index, 1);
      }
    }
   console.log(item + "<>", event.checked);
  }

  exists(item) {
    return this.selected3.indexOf(item) > -1;
  };

  isIndeterminate() {
    return (this.selected3.length > 0 && !this.isChecked());
  };

  isChecked() {
    return this.selected3.length === this.itemsObject.length;
  };



  toggleAll(event: MatCheckboxChange) { 

    if ( event.checked ) {

       this.itemsObject.forEach(row => {
          // console.log('checked row', row);
          this.selected3.push(row)
          });

        // console.log('checked here');
    } else {
      // console.log('checked false');
       this.selected3.length = 0 ;
    }
}
}

2 commentaires

Merci les gars. Travailler comme du charme

Merci mec. Fonctionne bien stackblitz.com/edit/angular-material-checkbox-select-all < / a>

1
votes

Une stratégie différente pourrait être de se lier à des valeurs sur un objet et un composant, au lieu d'appeler des méthodes. De cette façon, vous pourrez peut-être gérer plus efficacement l'état de votre composant.

Par exemple, vous pouvez introduire ce qui suit dans votre modèle d'objet:

<mat-checkbox [checked]="item.isChecked" (change)="itemChanged(item,$event)">

Vous pouvez ensuite lier ceci aux cases à cocher en utilisant:

[checked]="item.isChecked"

0 commentaires

0
votes

Sur votre Html, ajoutez quelque chose comme ci-dessous:

onChangeSelectAll(event) {
    if (event.checked) {
        this.offers.forEach(obj => {
            obj.selected = true;
        });
    }
    else {
        this.offers.forEach(obj => {
            obj.selected = false;
        });
    }
}

SUR votre fichier dactylographié,

<table class="table">
              <thead>
                <tr>
                  <th>
                    <mat-checkbox (change)="onChangeSelectAll($event)">Select/Deselect All</mat-checkbox>
                  </th>

                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of offers">
                  <td>
                    <mat-checkbox [checked]="item.selected" (change)="selection($event, i, item)" name="chkInvoice"></mat-checkbox>
                  </td>                      
                </tr>
              </tbody>
            </table>

0 commentaires