为什么从服务器请求的承诺数据未定义？

Question

我正在尝试从 ASP .NET Core API 获取值，然后使用 Angular 和 Typescript 在 html 页面中显示它们。来自服务器的请求和响应工作正常。响应是一个对象，我尝试使用模型 class 从响应中获取值。

问题是当我尝试显示值时，所有值都未定义。我认为问题出在 Promise 上。

这是我从服务器得到的响应：

Id: 1
Name: "asd"
Description: "asd"
Syntax: "Typescript"
IdentityString: "karma"
LastModified: "2020-01-05T00:51:00"
Content: "asd"
FileId: 1
File: null

还有代码：

fileshare.ts

export class FileShareComponent implements OnInit {


    constructor(
    private route: ActivatedRoute,
    private service: UserService,
    private http: HttpClient
    ) {}

  ngOnInit() {
    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);
  }
}

ShareModel.ts

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

service.ts

sharedFormData:ShareModel;

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

Answer 1

将 console.log(this.service.sharedFormData); 移到 then() 内。

因为现在它在收到响应之前执行。

看起来你的 service.sharedFormData = undefined 在 ngOnInit() 被调用的那一刻。但我不确定......但如果我是对的，那么这就是错误消息的原因。因为 this.service.sharedFormData = res 发生得晚得多。（与 console.log(this.service.sharedFormData) 相同）但在此之前 Angular 已经尝试使用 service.sharedFormData = undefined

渲染您的 HTML

为什么从服务器请求的承诺数据未定义？

Why the promise data requested from server is undefined?

response

promise

typescript

asp.net-core

angular