5

私はAngularが初めてです。ユーザーがローカルコンピューターから選択してイメージできるようにするAngular 2を使用して、単純なWebアプリケーションを作成しようとしています。<img>次に、この画像をタグに表示したいと思います。後で、回転、スケールの変更、幅の変更などの画像に対するアクションを実行します。

これは私のコンポーネントにあるものです

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img id="image"/>
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent { 
   // make FileReader work with Angular2
   changeListner(event){
        var reader = new FileReader();

        reader.onloaded = function (e) {
            // get loaded data and render thumbnail.
            var src = e.target.result;
            document.getElementById("image").src = src;
        };

        // read the image file as a data URL.
        reader.readAsDataURL(event.target.files[0]);
    }
}

しかし、それはまったく機能しません。Angular2 を使用して画像を読み取り、src 属性を更新するにはどうすればよいですか?

私はAngularを学ぼうとしています。:)

これを行うためのより良い簡単な方法はありますか？

4

4 に答える 4

7

onloadedイベント名があるため機能しません。そのようなイベントはありません。次のようになりますonload。

import {Component, ElementRef} from 'angular2/core'

@Component({
    selector: 'image-container',
    template: `
        <input type="file" (change)="changeListner($event)" />
        <img class="image" />
    `,
    directives: [ImageActionsComponent]
})
export class ImageContainerComponent {
    constructor(private element: ElementRef) {}

    changeListner(event) {
        var reader = new FileReader();
        var image = this.element.nativeElement.querySelector('.image');

        reader.onload = function(e) {
            var src = e.target.result;
            image.src = src;
        };

        reader.readAsDataURL(event.target.files[0]);
    }
}

またElementRef、コンポーネント内で画像を見つけるために使用することをお勧めします。

于 2016-02-12T07:31:06.670 に答える
2

angular: プロパティの結果がタイプ EventTarget に存在しないというエラーに直面した場合

次の方法で簡単に回避できます。

this.url = event.target['result']
于 2017-09-20T10:12:39.537 に答える
0

私の解決策はこれでした：

reader.onload = (e) => {
   image.src=reader.result;
}
于 2017-10-22T23:29:11.567 に答える