typescript 模型设置为仅可读Angular

dgiusagp  于 2023-01-06  发布在  TypeScript
关注(0)|答案(1)|浏览(103)

我刚开始使用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}]

但我得到了同样的错误;我该怎么解决这个问题呢?

zxlwwiss

zxlwwiss1#

我不知道你是如何创建SalaryModel的,但我会尝试用另一种方式来帮助你。
如果你不想发送一些数据到低层组件-不要改变低层组件的输入属性。这不是正常的数据流。使用低层组件,如转储组件:在@Input发送并在@Output发送(如“清除函数”)。有关双向数据绑定的详细信息-https://angular.io/guide/inputs-outputs
如果您有一些数据的一些“状态”-使用状态管理模式(如NGXS)或自定义服务状态管理器。

相关问题