web-dev-qa-db-fra.com

Angular2 - L'expression a changé après avoir été cochée - Liaison à div width avec des événements de redimensionnement

J'ai fait quelques lectures et enquêtes sur cette erreur, mais je ne sais pas quelle est la bonne réponse pour ma situation. Je comprends qu'en mode dev, la détection de changement s'exécute deux fois, mais je suis réticent à utiliser enableProdMode() pour masquer le problème.

Voici un exemple simple où le nombre de cellules dans le tableau devrait augmenter à mesure que la largeur de la div augmente. (Notez que la largeur de la div n'est pas seulement fonction de la largeur de l'écran, il est donc difficile d'appliquer @Media)

Mon code HTML se présente comme suit (widget.template.html):

<div #widgetParentDiv class="Content">
<p>Sample widget</p>
<table><tr>
   <td>Value1</td>
   <td *ngIf="widgetParentDiv.clientWidth>350">Value2</td>
   <td *ngIf="widgetParentDiv.clientWidth>700">Value3</td>
</tr></table>

Cela seul ne fait rien. J'imagine que c'est parce que rien ne provoque la détection de changement. Cependant, lorsque je modifie la première ligne comme suit et que je crée une fonction vide pour recevoir l'appel, cela commence à fonctionner, mais parfois, le message "L'expression a changé après avoir été cochée erreur"

<div #widgetParentDiv class="Content">
   gets replaced with
      <div #widgetParentDiv (window:resize)=parentResize(10) class="Content">

Ma meilleure hypothèse est qu'avec cette modification, la détection de changement est déclenchée et que tout commence à répondre. Cependant, lorsque la largeur change rapidement, une exception est levée car l'itération précédente de la détection de changement a pris plus de temps que la modification de la largeur du div.

  1. Existe-t-il une meilleure approche pour déclencher la détection de changement?
  2. Devrais-je capturer l'événement de redimensionnement par le biais d'une fonction permettant de s'assurer que la détection des changements se produit?
  3. L’utilisation de #widthParentDiv pour accéder à la largeur De la div est-elle acceptable? 
  4. Y a-t-il une meilleure solution globale?

Pour plus de détails sur mon projet, veuillez consulter this question similaire.

Merci

javascriptangularresponsive-designangular2-changedetection
36
Anthony Day

Autre moyen que j'ai utilisé pour résoudre ceci:

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


@Component({
  selector: 'your-seelctor',
  template: 'your-template',
})

export class YourComponent{

  constructor(public cdRef:ChangeDetectorRef) { }

  ngAfterViewInit() {
    this.cdRef.detectChanges();
  }
}
13
Luiz C. Junior

Utilisez simplement 

setTimeout(() => {
  //Your expression to change if state
});
0
Raj Gopal