![](/img/trans.png)
[英]How to make Angular 2 render HTML template after a promise in the component is resolved?
[英]How to load html page after promise is resolved?
我正在尝试使用 Angular 和 Typescript 从 ASP .NET Core API 向 html 组件显示一些数据,响应返回正确的值并且承诺运行良好。
问题是 html 页面在承诺解决之前加载,因此显示的值是未定义的。
在承诺解决后,我可以使用什么来加载页面以及如何加载?
文件共享.component.ts
export class FileShareComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private service: UserService,
private http: HttpClient
) {
const file: string = this.route.snapshot.queryParamMap.get('file');
this.http.get(this.service.BaseURL + '/Share?IdentityString=' + file)
.toPromise()
.then(res => {
this.service.sharedFormData = res as ShareModel;
console.log(this.service.sharedFormData);
});
}
ngOnInit() {
}
}
文件共享.component.html
<pre><code class="hljs">Name:
{{service.sharedFormData.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service.sharedFormData.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service.sharedFormData.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service.sharedFormData.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service.sharedFormData.Content}}</code></pre>
<div class="form-group text-center mt-4">
<button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
Raw</button>
</div>
共享模型.model.ts
export class ShareModel {
Id:number;
Name: string;
Description: string;
Syntax: string;
IdentityString:string;
LastModified: string;
Content: string;
FileId: number;
}
由于FileShareComponent
是触发服务调用的组件,除非您创建更复杂的嵌套组件架构,否则您将无法阻止组件初始化直到该调用完成。
我会隐藏这些值,直到 Observable 解决之后。 而且我认为没有紧迫的理由将 Observable 转换为承诺。 像这样的东西:
export class FileShareComponent implements OnInit {
// create a variable to determine whether screen is initialized
screenInitialized = false;
constructor(
private route: ActivatedRoute,
private router: Router,
private service: UserService,
private http: HttpClient
) {
const file: string = this.route.snapshot.queryParamMap.get('file');
this.http.get(this.service.BaseURL + '/Share?IdentityString=' + file)
// subscribe to Observable instead of converting it to a promise
.subscribe(res => {
this.service.sharedFormData = res as ShareModel;
// toggle initialized property
this.initialized = true;
console.log(this.service.sharedFormData);
});
}
ngOnInit() {
}
}
现在,只需将您的显示模板包装在一个隐藏的 div 中,直到加载数据:
<div *ngIf="initialized">
<pre><code class="hljs">Name:
{{service.sharedFormData.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service.sharedFormData.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service.sharedFormData.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service.sharedFormData.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service.sharedFormData.Content}}</code></pre>
<div class="form-group text-center mt-4">
<button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
Raw</button>
</div>
</div>
我认为这是根据您当前的结构让您前进的最简单方法。 如果我从头开始构建它,我会考虑使用路由器解析器。
或者更简单地说,您可以使用 elvis 运算符?.
在您的 html 模板中。
文件共享.component.html
<pre><code class="hljs">Name:
{{service?.sharedFormData?.Name}}</code></pre>
<pre><code class="hljs">Description:
{{service?.sharedFormData?.Description}}</code></pre>
<pre><code class="hljs">Syntax:
{{service?.sharedFormData?.Syntax}}</code></pre>
<pre><code class="hljs">LastModified:
{{service?.sharedFormData?.LastModified | date: "HH:mm dd/MM/yyyy"}}</code></pre>
<pre><code class="hljs">Content:
{{service?.sharedFormData?.Content}}</code></pre>
<div class="form-group text-center mt-4">
<button class="btn btn-dark" (click)="this.service.raw()" type="submit"><i class="fas fa-database"></i>
Raw</button>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.