angular - Angular 5:我的回复不会覆盖默认属性
问题描述
我尝试在我的 html 视图中绑定数据,但我的响应不会覆盖默认属性值。从 API 我得到了很好的回应。
反馈.statistics.model.ts
export class FeedbackStatistics {
overall: number = 0;
technicalSkills: number = 0;
communication: number = 0;
commercial: number = 0;
leadership: number = 0;
}
评论.component.ts
export class ReviewsComponent implements OnInit {
message = '';
feedback: FeedbackStatistics = new FeedbackStatistics();
constructor(
private profileService: ProfileService
) { }
ngOnInit(): void {
this.profileService.getUserFeedbackStatistics().subscribe(
response => {
this.feedback = response;
},
error => {
this.message = error.error_description;
}
);
}
}
评论.component.html
<!-- User Skills -->
<div class="d-flex flex-wrap text-center g-brd-around g-brd-gray-light-v4 g-pa-20 g-mb-40">
<div class="g-mr-40 g-mb-20 g-mb-0--xl" style="margin-left: 17px;">
<app-counter [from]=0 [to]=feedback.overall [of]=10 [animationTime]="700" [circleColor]="'#d3b6c6'" [fontSize]="80"></app-counter>
<h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Overall</h4>
</div>
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<app-counter [from]=0 [to]=feedback.technicalSkills [of]=10 [animationTime]="700" [circleColor]="'#bee3f7'" [fontSize]="80"></app-counter>
<h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Technical Skills</h4>
</div>
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<app-counter [from]=0 [to]=feedback.communication [of]=10 [animationTime]="700" [circleColor]="'#ffc2bb'" [fontSize]="80"></app-counter>
<h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Communication</h4>
</div>
<div class="g-mr-40 g-mb-20 g-mb-0--xl">
<app-counter [from]=0 [to]=feedback.commercial [of]=10 [animationTime]="700" [circleColor]="'#c9ff97'" [fontSize]="80"></app-counter>
<h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Commercial Acumen</h4>
</div>
<div class="g-mb-20 g-mb-0--lg">
<app-counter [from]=0 [to]=feedback.leadership [of]=10 [animationTime]="700" [circleColor]="'#eeeeee'" [fontSize]="80"></app-counter>
<h4 class="h6 g-font-weight-300 g-mt-5 mb-0">Leadership</h4>
</div>
</div> <!-- End User Skills -->
配置文件.service.ts
getUserFeedbackStatistics(): Observable<FeedbackStatistics> {
if (!JSON.parse(localStorage.getItem('authorizationData'))) {
return Observable.empty<FeedbackStatistics>();
}
return this.http.get<FeedbackStatistics>('api/reviews/feedbackStatistics?username=' + JSON.parse(localStorage.getItem('authorizationData')).userName)
.catch(error => this.handleError(error));
}
例如,如果我按照代码中的说明保留它,我会得到所有属性的结果 0,但如果我这样声明:“反馈:FeedbackStatistics;” 我得到了响应值,但是我有错误,反馈不能被取消定义。
任何提议都会受到欢迎。
谢谢你。
解决方案
一,构造函数没有明确定义,这没关系,我猜
第二,如果在订阅之前没有在角度服务中完成,则需要将响应映射到 json。
第三 ,
feedback: FeedbackStatistics = new FeedbackStatistics();
constructor(private profileService: ProfileService) {
feedback= new FeedbackStatistics();
}
这需要在构造函数中
推荐阅读
- python-3.x - 如何从 Django 模板中的 API 响应转换日期
- batch-file - 如何在同一命令窗口中运行 asp.net core run 和 vue js serve?
- java - 如何在 JPA/hibernate 继承策略中删除父子元素加入?
- javascript - 从没有类型函数/方法的数据库返回对象
- flutter - Flutter 应用程序在填充数据后经常崩溃并且没有显示错误
- python - 引用和计数属于层次结构的列
- templates - 在模板中渲染之前在 Jinja2 中转换 YAML
- android - Google Map 未在 Android Lollipop 和 Marshmallow Google map v2 中专门加载
- javascript - 如果 DOM 中的元素有重复的 ID 并且我查询创建的第二个元素会发生什么
- c# - SignalR ASP.Net Core 无法通过 Typescript 客户端添加上下文项