解决promise后如何加载html页面？答案

【问题标题】：How to load html page after promise is resolved?解决promise后如何加载html页面？
【发布时间】：2020-01-05 21:05:07
【问题描述】：

我正在尝试使用 Angular 和 Typescript 从 ASP .NET Core API 向 html 组件显示一些数据，响应返回正确的值并且承诺运行良好。

问题是 html 页面在 promise 解决之前加载，所以显示的值是未定义的。

promise 解决后我可以使用什么来使页面加载以及如何加载？

fileshare.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() {

  }


}

fileshare.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>

share-model.model.ts

export class ShareModel {
    Id:number;
    Name: string;
    Description: string;
    Syntax: string;
    IdentityString:string;
    LastModified: string;
    Content: string;
    FileId: number;
}

【问题讨论】：

您是否在console.log(this.service.sharedFormData); 中获取值？
尝试将this.changeDetectorRef.detectChanges() 放在then() 块内this.service.sharedFormData = res as ShareModel; 之后，但这不是必需的。也试试看，让我知道
console.log(this.service.sharedFormData)中有值；但是这些值在 html 请求后显示在控制台中。现在我来看看路由器解析器。

标签： angular typescript dependency-injection promise angular-resolver

【解决方案1】：

由于FileShareComponent 是触发服务调用的那个，除非您创建更复杂的嵌套组件架构，否则您将无法阻止组件初始化，直到该调用完成。

在 Observable 解决之前，我会隐藏这些值。而且我认为没有紧迫的理由将 Observable 转换为 Promise。像这样的：

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>

我认为根据您当前的结构，这是让您继续前进的最简单方法。如果我从头开始构建它，我会考虑使用router resolver。

【讨论】：

【解决方案2】：

或者更简单地说，您可以在 html 模板中使用 elvis 运算符 ?.。

fileshare.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>

【讨论】：