Angular2 erfrischenden Blick auf array-push

Ich kann nicht scheinen, um angular2 Ansicht aktualisiert werden, auf ein array.push-Funktion, aufgerufen von einem setInterval asynchronen Betrieb.

der code ist aus diesem eckige plunkr Beispiel mit der setInterval-Funktion:

Was ich versuche zu tun, ist wie folgt:

JS:

import {View, Component, bootstrap, Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/angular2'

@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
@View({template: `Number of ticks: {{numberOfTicks}}`})
class Cmp {
  numberOfTicks = [];
  
  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks.push(3);
      this.ref.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'app',
  changeDetection: ChangeDetectionStrategy.OnPush
})
@View({
  template: `
    <cmp><cmp>
  `,
  directives: [Cmp]
})
class App {
}

bootstrap(App);

HTML:

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
  <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
  <script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
  <script data-require="jasmine@*" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
  
  <script src="config.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.37/angular2.min.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>

</head>

<body>
  <app></app>
</body>

</html>

Den oben genannten code funktioniert richtig, wenn "numberOfTicks" ist nur eine Zahl, (wie die plunker original-Beispiel zeigt), aber sobald ich es in ein array und push-Daten, es wird nicht aktualisiert.

Ich kann nicht scheinen, um zu verstehen, warum.

Folgende Verhalten ist ähnlich wie ein Problem, das ich habe, wenn Sie versuchen zu aktualisieren ein Diagramm in angular2 mit neuen Daten Punkte bei der Verwendung von setInterval /setTimeout.

Danke für die Hilfe.

  • Ich werde erarbeiten - ich bin versucht, zu aktualisieren ein Diagramm in Echtzeit-Aktualisierung und Daten-array mit Hilfe der oben setInterval methodoligy, diese plunker könnte ein gutes Beispiel sein, um zu versuchen und erreichen das: plnkr.co/Bearbeiten/vdgKVJOymMYhiyqZrPma?p=Album Vorhören
InformationsquelleAutor Omer Kushmaro | 2016-03-27
  1. 19

    Müssen Sie aktualisieren Sie die ganze Referenz der Elemente in einem array nach dem hinzufügen eines Elements in es:

      constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks.push(3);
      this.numberOfTicks = this.numberOfTicks.slice();
      this.ref.markForCheck();
    }, 1000);
  }
}

    Bearbeiten

    Den DoCheck-Schnittstelle könnte für Sie auch interessant, da es ermöglicht es Ihnen, schließen Sie Ihren eigenen change-detection-Algorithmus.

    Finden Sie unter diesem link für mehr details:

    Hier ist ein Beispiel:

    @Component({
  selector: 'custom-check',
  template: `
    <ul>
      <li *ngFor="#line of logs">{{line}}</li>
    </ul>`
})
class CustomCheckComponent implements DoCheck {
  @Input() list: any[];
  differ: any;
  logs = [];

  constructor(differs: IterableDiffers) {
    this.differ = differs.find([]).create(null);
  }

  ngDoCheck() {
    var changes = this.differ.diff(this.list);
    if (changes) {
      changes.forEachAddedItem(r => this.logs.push('added ' + r.item));
      changes.forEachRemovedItem(r => this.logs.push('removed ' + r.item))
    }
  }
}
    • Dank Thierry, während dies in der Tat löst den Fall, dass ich es hier beschrieben ist, werde ich etwas näher. Ich bin versucht, zu aktualisieren ein Diagramm dynamisch aktualisiert seinen Wert array, Dinge ist, wenn ich slice das array der graph wird neu gezeichnet völlig. In angular 1.x ich Tat dies mit $timeout/$Intervall, die die $es anzuwenden und zu eckig, um änderungen zu erkennen. Ich versuche dasselbe zu erreichen 'Echtzeit' beeinflussen mit Winkel-2
    • Ich werde das anders formulieren - mit der Methode, die Sie vorgeschlagen, in einem Diagramm wird die Arbeit, nur die Grafik wäre, 'flash', anstatt nur ziehen Sie einen neuen Punkt auf die bestehenden Diagramm
    • Okay, ich verstehe. Vielleicht könnten Sie injizieren ChangeDetectorRef Instanz in der Komponente und rufen Sie seine markForCheck Methode nach dem Hinzugefügt ein element im array.
    • Ja das ist genau das, was ich versuche zu tun, leider, wie es scheint, Winkel-noch muss der array-Referenz zu ändern. Allerdings, das Verhalten sehe ich sehr merkwürdig. Eckig wird, aktualisieren Sie die Grafik, wenn ich irgendeine Aktion auf dem browser. Dinge wie Größenänderung browser-Größe / öffnen & schließen debugger. Solange ich diese, wird der graph magisch-updates mit dem gleichen Verhalten wie in angular 1.
    • Ja das ist der Fall für perfoémane Gründen. Ich fragte Sie, in der Vergangenheit und Sie erzählte mir, dass ich verwenden könnte, der Ansatz verwendet, die NgStyle Richtlinie. Sehen rhis link: github.com/angular/angular/blob/master/modules/angular2/src/....
    • Die DoCheck-Schnittstelle könnte Sie interessieren, da es ermöglicht es Ihnen, schließen Sie Ihren eigenen change-detection-Algorithmus.
    • Sehen rhis link: angular.io/docs/ts/latest/api/core/DoCheck-interface.html
    • href="https://angular.io/docs/ts/latest/api/core/DoCheck-interface.html" >angular.io/docs/ts/latest/api/core/DoCheck-interface.html ==> 404 && github.com/angular/angular/blob/master/modules/angular2/src/... ===> 404

    InformationsquelleAutor Thierry Templier
  2. 9

    Den oben genannten code funktioniert richtig, wenn "numberOfTicks" ist nur eine Zahl, aber sobald ich es in ein array und push-Daten, es wird nicht aktualisiert. Ich kann nicht scheinen, um zu verstehen, warum.

    Ist es denn eine Zahl ist eine JavaScript-primitive-Typ und ein array ist eine JavaScript-Referenz geben. Wenn Angular change detection ausgeführt wird, verwendet === zu bestimmen, ob eine Vorlage, die Bindung hat sich geändert.

    Wenn {{numberOfTicks}} ist ein primitiver Typ === vergleicht die aktuellen und vorherigen Werte. Also die Werte 0 und 1 unterschiedlich sind.

    Wenn {{numberOfTicks}} ist ein Referenz-Typ, === vergleicht die aktuellen und vorherigen (Bezugs -) Werte. Also, wenn die array-Referenz nicht ändern, Winkel nicht erkennen eine Veränderung. In deinem Fall, mit push() die array-Referenz ändert sich nicht.

    Wenn Sie den folgenden in Ihr template anstelle

    <div *ngFor="#tick of numberOfTicks">{{tick}}</div>

    dann Eckig würde die Ansicht aktualisieren, weil es eine Bindung zu jedem einzelnen array-element, sondern dann nur das array selbst. Also, wenn ein neues Element push()ed, oder einen vorhandenen Eintrag gelöscht oder geändert werden, alle diese änderungen werden erkannt.

    Also in deinem Diagramm plunker, sollten die folgenden Updates, wenn der Inhalt der from und to arrays ändern:

    <span *ngFor="#item of from">{{item}}</span>
<span *ngFor="#item of to">{{item}}</span>

    Gut, es aktualisiert wird, wenn jeder Artikel ist ein primitiver Typ.

    • Dies scheint nicht mehr zu funktionieren, ich habe "Unerwartetes token #" - Fehler.
    • Obwohl es scheint, angular2 nicht wirklich === mehr, da man auf die array-funktioniert Prima. Denke, Sie haben volle Objekt-Vergleich einschließlich traversieren von arrays.
    InformationsquelleAutor Mark Rajcok
Schreibe einen Kommentar