未定义模板加载角度（尽管承诺）

Im在加载时使用数据加载角模板由于调用未定义的属性，几秒钟后，服务器的downlaoding数据完成并且模板加载数据后，出现错误。很明显，有异步问题。但我已经实现了OnInit方法来加载所需的数据到模板，在这里我很困惑，并要求帮助。未定义模板加载角度（尽管承诺）

@Component({ 
    selector: 'drawing', 
    templateUrl: './drawing.component.html', 
    styleUrls: ['./drawing.component.css'] 
}) 

export class DrawingComponent implements OnInit{ 

    private drawing: Drawing; 

    constructor(private drawingService: DrawingService){} 

    getDrawing(): void { 
    this.drawingService.getDrawing().then((data) => {this.drawing = data}); 
    } 

    ngOnInit(): void { 
    this.getDrawing(); 
    } 

getUrl(): string { 
    return 'http://www.localhost:8080/api/image/' + this.drawing.drawingUrl; 
    }

下图类：

export class Drawing { 

    drawingId: number; 
    drawingUrl: string; 
    zoom: number; 
    rotation: number; 
}

以下组件的HTML tempalte

<button (click)="zoomIn()">Zoom In</button> 
<button (click)="zoomOut()">Zoom Out</button> 
<button (click)="rotateView()">Rotate</button> 
<pdf-viewer 
    id="textLayer" 
    [src]="getUrl()" 
    [page]="page" 
    [original-size]="true" 
    style="display: block;" 
    [zoom]="getZoom()" 
    [render-text]="false" 
    (click)="getCoordinates($event)" 
    [rotation]="getRotation()" 
></pdf-viewer>

和绘图服务：

@Injectable() 
export class DrawingService { 

    private drawingUrl = 'http://www.localhost:8080/api/drawing/1'; 

    constructor(
    private http: Http){} 

    getDrawing(): Promise<Drawing> { 
     return this.http.get(this.drawingUrl).toPromise().then((res) => res.json() as Drawing); 
    } 

}

所以先上载即时得到

ERROR TypeError: Cannot read property 'drawingUrl' of undefined 
    at DrawingComponent.webpackJsonp../src/app/drawing/drawing.component.ts.DrawingComponent.getUrl

和几秒钟后，它加载

来源

2017-06-13 filemonczyk

你似乎对Promise的工作原理有一个根本性的误解。您显然正在尝试在准备好之前访问'drawing'成员。你的'getUrl'方法是可能的罪魁祸首。 –

一旦A在未来某个任意点完成，Promise只是一个方便的方法。由于您在A完成之前尝试访问B的结果，因此会出现错误。 –

这个我最有可能是由于这样的事实：promise会只要将数据返回到该组件之前需要服用。那么你的组件已经加载了。在填充变量之前，尝试检查在HTML文件中是否存在值为*ngIf。然后它会出现，当它准备就绪，你不应该看到错误undefined

来源

2017-06-13 19:34:18

我以为html模板直到ngOnInit完成才会被渲染。 – filemonczyk

'ngOnInit' * does *完成，但由它触发的http请求直到几秒钟后才开始。你在你的问题中提到了“异步”，但你似乎没有意识到这一点。 –

查看此文档的异步部分。你会明白为什么会有延迟。 https://angular.io/tutorial/toh-pt4#async-services-and-promises –

未定义模板加载角度（尽管承诺）

回答

相关问题