我刚开始使用Angular和Typescript,目前正在支持一个项目,因此我的任务是创建一个服务并显示添加到DOM的数据(不刷新它)。
因此,我在组件上创建调用,如下所示:
- TS:**
export class ProfileFormComponent implements OnInit, OnDestroy {
@Input() profile: ProfileModel;
addSalary() {
let salary: SalaryModel = {
clientId: 1,
profileId: this.profile.id,
amount: this.salary.value,
startDate: new Date(),
endDate: null,
}
this.apiService.profileService.addSalary(salary).subscribe(p=>{
this.apiService.profileService.getProfile(this.profile.id).subscribe(pc=>{
debugger;
this.profile.salaries = pc.salaries;
this.resetDataForm()
});
});
}
}
- 型号**
export class ProfileModel {
// code here
salaries: SalaryModel[];
}
- HTML**
<li *ngFor="let salary of profile.salaries; let i=index">
//code here
</li>
该方法在API上运行良好,但在调试器运行后分配模型时会抛出错误:第一个月
TypeError:无法为对象"[object Object]"的只读属性"salaries"赋值
我尝试将对象设置为可写:
Object.defineProperty(this.profile.salaries, 'salaries', {
writable:true
});
this.profile.salaries = [{...pc.salaries}]
但我得到了同样的错误;我该怎么解决这个问题呢?
1条答案
按热度按时间zxlwwiss1#
我不知道你是如何创建SalaryModel的,但我会尝试用另一种方式来帮助你。
如果你不想发送一些数据到低层组件-不要改变低层组件的输入属性。这不是正常的数据流。使用低层组件,如转储组件:在@Input发送并在@Output发送(如“清除函数”)。有关双向数据绑定的详细信息-https://angular.io/guide/inputs-outputs
如果您有一些数据的一些“状态”-使用状态管理模式(如NGXS)或自定义服务状态管理器。