javascript - Angular 2 - 如何向模板发送异步信息

Question

我正在尝试在验证后向模板发送一些图像信息。但我不明白。

进入模板的变量位于回调内，或者位于异步函数内，并且我不知道将此信息发送到模板。

可以帮我解决这个问题吗？我已经尝试了一切。

event.component.ts

import "rxjs/Rx";
import {Component} from '@angular/core';

@Component({
    selector: '<my-image></my-image>',
    templateUrl: './event.component.html',      
})
export class EventComponent {
    files: File[];
    file: any
    imageName: any;
    imageSize: any;
    whithImage = false;

    ngOnInit() {this.files = []}

    onFileSelect(event) {
        this.files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
        this.file = this.files[0];
        this.isImage(this.file, function(res, file){
            if(res==true){
                this.imageName = file.name;
                this.imageSize = file.size;
                this.whithImage = res;
            }
        }) 
    }

    isImage(file, callback) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var contents = reader.result;
            var buf = new Uint8Array(contents);
            if(buf[0] === 0xFF && buf[1] === 0xD8 && buf[2] === 0xFF){
                callback(true, file) //jpg
            }else{callback(false)}
        };
        reader.readAsArrayBuffer(file);
    }

    onChooseClick(event, fileInput) {
        fileInput.value = null;
    }

event.component.html

<span (click)="onChooseClick($event, fileinput)">
    Image<input  #fileinput type="file" (change)="onFileSelect($event)"/>
</button>
<div *ngIf="whithImage">
    <p>{{ imageName }}</p>
    <p>{{ imageSize }}</p>
</div>

Answer 1

首先尝试 @peeskillet 建议的方法 - 即，通过使用 arrow function 来使用正确的 this 上下文。 :

export class EventComponent {
   onFileSelect(event) {
        ...
        this.isImage(this.file, (res, file) => {     // <----
            if(res==true) {
                this.imageName = file.name;
                this.imageSize = file.size;
                this.whithImage = res;
            }
        }); 
    }

如果这不起作用，那么 Angular 不知道如何对异步事件进行猴子修补，因此当事件触发时，Angular 更改检测不会运行(因此您的 View 不会更新以反射(reflect)新组件)属性值)。您需要 manually trigger change detection 。这是一种方法:

import {ChangeDetectorRef} from '@angular/core';     // <-----
export class EventComponent {
   constructor(private cdref:ChangeDetectorRef) {}   // <-----
   onFileSelect(event) {
        ...
        this.isImage(this.file, (res, file) => {     // <----
            if(res==true) {
                this.imageName = file.name;
                this.imageSize = file.size;
                this.whithImage = res;
                this.cdref.detectChanges();          //  <------
            }
        }); 
    }