Eckige 2 - Interpolation und-Bindung mit asynchronen http-request

Ich bin neu Eckig 2 und ich bin mit einem problem konfrontiert, mit asynchronen http-request und-Bindung mit interpolation.

Hier meine Komponente:

@Component({
  selector: 'info',
  template: `<h1>{{model.Name}}</h1>`
})
export class InfoComponent implements OnInit {

    model: any;

    constructor(
        private _service: BackendService
    ) { }

    ngOnInit() {
         if (this.model == null) {
            this._service.observableModel$.subscribe(m => this.model = m);
            this._service.get();
        }     
    }
}

Wenn das template gerendert wird, bekomme ich eine Fehlermeldung, weil "Modell" ist nicht festgelegt noch.

Habe ich das problem gelöst mit diesem sehr hässlicher hack:

@Component({
    selector: 'info',
    template: `
  <template ngFor #model="$implicit" [ngForOf]="models | async">
  <h1>{{model.Name}}</h1>
  </template>
  `
})
export class NeadInfoComponent implements OnInit {

    models: Observable<any>;

    constructor(
        private _service: BackendService
    ) { }

    ngOnInit() {
         if (this.models == null) {
            this._service.observableModel$.subscribe(m => this.models = Observable.of([m]));
            this._service.get();
        }     
    }
}

Meine Frage ist: wie stellen Sie den template-rendering, bis meine http-Aufruf abgeschlossen ist oder wie interpolieren das "Modell" die Werte direkt in das template ohne die Bindung an eine andere Komponente?

Dank!

InformationsquelleAutor Tony Alexander Hild | 2016-01-26

12

Wenn Sie wieder ein Objekt von Ihrem server verwenden, können Sie die sichere navigation (bisher "Elvis") - operator (?.) in Ihrer Vorlage:
```
@Component({
  selector: 'info',
  template: `<h1>{{model?.Name}}</h1>`
})
export class InfoComponent implements OnInit {
    model: any;
    constructor(private _service: BackendService) { }

    ngOnInit() {
       this._service.getData().subscribe(m => this.model = m);
       //getData() looks like the following:
       //   return this._http.get('....')  //gets JSON document
       //      .map(data => data.json()); 
    }
}
```
Sehen diese Antwort für eine funktionierende plunker.
- Dank Mark! Der Elvis hat den trick! Aber ich verstehe nicht, noch die render-flow. Das template gerendert wird, jedes mal, wenn es eine änderung in den Eigenschaften der Komponente?
- während Angular change detection (läuft nach jedem Ereignis) standardmäßig werden alle Ihre view/template-Bindungen schmutzig sind geprüft, das heißt, Sie werden auf änderungen überprüft. Wenn die Daten wieder aus dem server, das ist ein Ereignis so ändern Sie die Erkennung ausgeführt wird. model.Name schmutzig ist überprüft und geändert haben, so Eckig updates der DOM. Nach Winkel gibt die Kontrolle an den browser, so sieht es die DOM-änderung und-updates, was wir auf dem Bildschirm sehen.
- Danke @MarkRajcok! Es ist jetzt klar.
InformationsquelleAutor Mark Rajcok

Dieser Diskussion Listen ein paar Strategien https://github.com/angular/angular/issues/6674#issuecomment-174699245

Die Frage hat viele Implikationen. In einigen Fällen, die observablen verwaltet werden sollten, die außerhalb des Rahmens.

A. Sie können die scan-alle observablen, bevor Sie bootstrap

B. Bootstrap Scannen Sie dann alle observablen, bevor er das Objekt, um die top-level-Komponente.

C. Sie können auch ändern, die changeDetection innerhalb der Komponente entweder ausgelöst, wenn Eingaben zur änderung oder manuell auslösen des change-Detektor.

D. Wenn Sie |async-dann sollte es nur verwendet werden, auf der obersten Ebene, wenn Sie nicht das Gefühl, wie mit .abonnieren, aber Sie sollten wirklich nur verwenden .abonnieren.

E. Wenn Sie |async überall dann, was Sie wirklich tun, ist die Umkehrung, die Kontrolle über das rendering der observablen, das heißt, wir sind zurück in der Angular1 Tage von CSS-änderungen, so dass Sie müssen entweder C, D, B, oder Ein

ChangeDetectionStrategy scheint nicht zu funktionieren im moment. Würden Sie einfache die Komponente als separate.

Können wir auch ngOnInit lifecycle-Haken zum entfernen der Komponente aus der change-detection-Baum. Sie müssten diese laufen.ref.detach(); wobei ref injiziert, die über ChangeDetectorRef

  ngOnInit() {
    this.ref.detach();
  }
  makeYourChanges() {
    this.ref.reattach(); //attach back to change detector tree

    this.data.value = Math.random() + ''; //make changes

    this.ref.detectChanges(); //check as dirty

    this.ref.detach(); //remove from tree
    //zone.js triggers changes
  }

ChangeDetectorRef

Können Sie auch nicht zählen zone.js und die manuelle Kontrolle für alle änderungen. Sie können auch Spritzen NgZone zum ausführen einer operation, die außerhalb der zone.js damit es nicht sagen, und schräg trigger-chanes. Zum Beispiel,

//this example might need a refactor to work with rxjs 5
export class Timeflies {
  pos   = 'absolute';
  color = 'red';
  letters: LetterConfig[];
  constructor(
    private service: Message,
    private el: ElementRef,
    private zone: NgZone) {

  }
  ngOnInit() {
    //initial mapping (before mouse moves)
    this.letters = this.service.message.map(
      (val, idx) => ({
        text: val,
        top: 100,
        left: (idx * 20 + 50),
        index: idx
      })
    );
    this.zone.runOutsideAngular(() => {
      Observable
        .fromEvent(this.el.nativeElement, 'mousemove')
        .map((e: MouseEvent) => {
          //var offset = getOffset(this.el);

          //subtract offset of the element
          var o = this.el.nativeElement.getBoundingClientRect();

          return {
            offsetX: e.clientX - o.left,
            offsetY: e.clientY - o.top
          };
        })
        .flatMap(delta => {
          return Observable
            .fromArray(this.letters
              .map((val, index) => ({
                letter: val.text,
                delta,
                index
              })));
        })
        .flatMap(letterConfig => {
          return Observable
            .timer( (letterConfig.index + 1) * 100)
            .map(() => ({
              text:  letterConfig.letter,
              top:   letterConfig.delta.offsetY,
              left:  letterConfig.delta.offsetX + letterConfig.index * 20 + 20,
              index: letterConfig.index
            }));
        })
        .subscribe(letterConfig => {
          //to render the letters, put them back into app zone
          this.zone.run(() => this.letters[letterConfig.index] = letterConfig);
        });

    });//zone
  }
}

InformationsquelleAutor Günter Zöchbauer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.