简体   繁体   English

如何使用Typescript为Angular反应形式声明模型类

[英]How do I declare a model class using Typescript for Angular reactive Form

I would like to create a model for reactive Form. 我想为反应形式创建一个模型。

The JSON File look like this: JSON文件如下所示:

      {
        "ITEMS": [
          {
            "NAME": "aaa",
            "QUANTITY": ["140", "60"]
          }
        ]
      }

Thanks for your help :) 谢谢你的帮助 :)

Here have an example, item.model.ts and his application at app.component.ts . 这里有一个示例item.model.ts及其在app.component.ts应用程序。

https://stackblitz.com/edit/angular-s3obqy?embed=1&file=src/app/app.component.html https://stackblitz.com/edit/angular-s3obqy?embed=1&file=src/app/app.component.html

In your case with this stringified object you can parse like that at app.component.ts : 对于这种字符串化对象,您可以在app.component.ts进行解析:

 yourString = ` {
        "ITEMS": [
          {
            "NAME": "aaa",
            "QUANTITY": ["140", "60"]
          }
        ]
      }`;

  foo: Item = JSON.parse(this.yourString);

There is the model: 有模型:

export class DataModel {
    public ITEMS: any[];

    constructor(public NAME: string, public QUANTITY: Array<string>) {
        this.ITEMS = [{NAME, QUANTITY}];
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用 TypeScript 在我的 Angular 2 组件中声明模型类? - How do I declare a model class in my Angular 2 component using TypeScript? 如何使用反应式表单将表单绑定到 Angular 6 中的模型? - How can I bind a form to a model in Angular 6 using reactive forms? 使用打字稿以反应形式的角度适配器图案 - Adapter pattern in angular using typescript for a reactive form 如何使用 typescript 中的装饰器向 class 添加和声明新属性(角度) - How to add and declare new property to class using decorator in typescript (angular) 如何在Angular反应性表单中填充选择表单字段? - How do I populate a select form field in an Angular Reactive Form? 如何在 Angular 中以反应形式禁用按钮? - How do I disable a button in a reactive form in Angular? 如何在Angular 6中使用Jasmine将加载的数据测试为反应形式? - How do I test loaded data into a reactive form with Jasmine in Angular 6? 如何在 Angular 11 中触发 onChange 回调 - How do I NOT trigger the onChange callback in Angular 11 a Reactive Form 如何使用Observable初始化Reactive Angular2表单? - How can I initialize a Reactive Angular2 form using an Observable? 如何使用打字稿类生成对象的表单元素以及如何使用角形的反应性表单生成对象 - How to generate form elements using typescript classes and objects using Reactive Forms in angular
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM