Question

我的代码

import { CameraService, CameraDestinationType, CameraPictureSourceType } from 'angular-cordova/plugin/camera'
import { LazyloadDirective } from 'achromatic/lazyload'
@Component({
    template: `
            <div *ngIf="selected">
                <div [lazyload] width="100" height="100"></div>
            </div>

    `,
    providers: [createDiscussionService, CameraService]
})
export class CreateDiscussionComponent  {
    @ViewChild(LazyloadDirective) lazyloadDirective: LazyloadDirective;
    selected: any = false
    uploadImage(): void {
        this.cameraService.getPicture({...})
        .subscribe(data_url => {
            if (data_url) {this.selected = true}
            this.lazyloadDirective.update(data_url)
        })
    }
}

它的作用是，当用户选择一张照片时，它会显示div包装，然后将照片数据加载到lazyload div中

问题：用户点击照片后，我收到此错误

Cannot read property 'update' of undefined

有趣的是，如果我删除<div *ngIf="selected">一切正常。我怀疑这种情况可能与lazyload无法更新

有关

Answer 1

当selected为false此部分时

       <div *ngIf="selected">
            <div [lazyload] width="100" height="100"></div>
       </div>

不存在于DOM中，因此也没有LazyloadDirective指令实例。

也许您想使用hidden代替

       <div [hidden]="!selected">
            <div [lazyload] width="100" height="100"></div>
       </div>

或@ViewChildren()，在selected和true之间false发生变化时进行更新。

angular 2 - lazy loader指令无法读取underfined的属性更新

1 个答案: