如何将对象属性绑定到 angular2 中的文本框

用户3301440

我是 Angular 的新手,我正在尝试绑定由模型对象中的文本框组成的表单。但我收到一个错误,如“未处理的承诺拒绝:模板解析错误:无法绑定到‘NgModel’,因为它不是‘输入’的已知属性”

我在谷歌上投入了大量时间,但问题仍然存在

下面是我的代码。

html:

    <div>
     <div class="col-sm-6 form-group">
        <label class="control-label">Project Name:</label>
        <input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl.PROJECT_NAME" >
    </div>

     <div class="col-sm-6 form-group">
        <label class="control-label">Project Manager Name:</label>
        <input type="text" class="form-control" id="txtProjManager" >
    </div>
    <div class="col-sm-6 form-group">
        <label class="control-label">Project Manager Email ID:</label>
        <input type="text" class="form-control" id="txtProjManagerMailID" >
    </div>
    </div>

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent }  from './app.component';
    import { FormsModule} from '@angular/forms';  
    import { HttpModule } from '@angular/http';
    import {SpotCheckStatusComponent} from './spotcheckstatus.component';

    @NgModule({
      imports:      [ BrowserModule ,FormsModule,HttpModule ],
      declarations: [ AppComponent,SpotCheckStatusComponent ],
      bootstrap:    [ SpotCheckStatusComponent ]
    })
    export class AppModule { }

projectFields.ts

        export class projectFields {
                public PROJECT_CODE:string;
                public PROJECT_NAME:string
                public PROJECT_MANAGER: string;
                public PROJECT_MANAGER_EMAIL_ID: string;    
        }

SpotCheckStatusComponent.ts

            import {Component,OnInit ,OnChanges} from '@angular/core';
        import {IMyDpOptions} from 'mydatepicker';
        import {HttpService} from './http.service';
        import { serviceLine } from './models/serviceLine';  
        import { projectFields } from './models/projectFields';  


        @Component({
          selector: 'my-app',
          styleUrls:['/css/home.css'],
          templateUrl:'./SpotCheckStatus.html',
          providers:[HttpService]

        })
        export class SpotCheckStatusComponent  implements OnInit
        {
             name = 'SpotCheckStatus'; 

             public projectFieldsdtl: projectFields[];  

          constructor(
            private httpService: HttpService
          ) {}

          ngOnInit(){

                  this.httpService.getProjectCode(serviceline).subscribe(
                  response=> {      

                    this.projectFieldsdtl=response[0];
                    },
                  error=> {
                      console.log("ERROR: ",error);
                      console.log(error.json()); //gives the object object
                  },
                  () => {
                      console.log("Completed");
                  }

                  );
            }
        }

最后 projectFieldsdtl 得到了如下对象:

    [{
    PROJECT_CODE:"9999"
    PROJECT_MANAGER:"shekat"
    PROJECT_MANAGER_EMAIL_ID:"[email protected]"
    PROJECT_NAME:"ABFL"
    }]
拉梅什·拉金德兰

您错过了 ngmodel 中的双引号。

<input type="text" class="form-control" id="txtProjName" [(ngModel)]="projectFieldsdtl.PROJECT_NAME" >

编辑

您也在 ng-model 中使用 Array 对象。所以它应该像projectFieldsdtl[0].PROJECT_NAME而不是projectFieldsdtl.PROJECT_NAME.

由于服务 anc 调用。在你的 div 标签上试试这个 *ngIf="projectFieldsdtl != null"

<div class="col-sm-6 form-group" *ngIf="projectFieldsdtl != null && projectFieldsdtl != undefined">
        <label class="control-label">Project Name:</label>
        <input type="text" class="form-control" id="txtProjName" [(NgModel)]="projectFieldsdtl[0].PROJECT_NAME" >
    </div>

你应该在nginit函数中初始化一个空对象,试试下面的代码

ngOnInit(){
    this.projectFieldsdtl=[{
    PROJECT_CODE:""
    PROJECT_MANAGER:""
    PROJECT_MANAGER_EMAIL_ID:""
    PROJECT_NAME:""
    }];
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将对象属性分配给 Angular 2 中的文本框?

来自分类Dev

在Angular 2中的文本框中绑定值

来自分类Dev

如何将2个文本框绑定到一个属性?

来自分类Dev

如何将对象中的预填充数据绑定到 Angular 5 中的单选按钮

来自分类Dev

如果我在文本框中输入字符“A”,Angular2 + Html 如何编写代码,它会显示 A Enter

来自分类Dev

如何在 angular2 的剑道掩码文本框中转义掩码规则?

来自分类Dev

在Angular 8中使用相同的ngModel属性在多个文本框中绑定不同的值

来自分类Dev

如何使用选择将对象属性绑定到Angular2表单项

来自分类Dev

如何将文本框对象绑定到ViewModel

来自分类Dev

Angular2,TypeScript,如何将属性值读取/绑定到组件类(在ngOnInit中未定义)

来自分类Dev

如何使用Angular JS在带有输入字段的文本框中添加文本并将其从文本框中删除?

来自分类Dev

WPF:如何将对象绑定到组合框

来自分类Dev

如何将一个文本框中的字符集转换成图2中的文本框效果?

来自分类Dev

如何使用value属性在2个文本框中显示2个以上的值

来自分类Dev

绑定到angular2中的组件属性

来自分类Dev

如何遍历文本框中的文本?

来自分类Dev

在Visual Basic中将数据从Form1中的文本框传递到打开的Form2中的文本框

来自分类Dev

清除绑定到wpf中的静态属性的文本框

来自分类Dev

如何将 12 位数字从富文本框移动到文本框 2

来自分类Dev

Angular2中的输入属性绑定

来自分类Dev

如何将对象从一个组件传递到另一个组件以在angular2中建立数据模型?

来自分类Dev

如何内嵌数组以在yii2 ActiveForm中的文本框中显示它?

来自分类Dev

如何将JavaScript重新绑定到angular2组件中的元素?

来自分类Dev

如何从2个动态文本框中计算值并显示在第三个动态文本框中?

来自分类Dev

在form1的文本框中输入的值未传递到form2的标签

来自分类Dev

如何在Angular 9中创建自定义文本框组件

来自分类Dev

如何从Angular.js中的json获取文本框值

来自分类Dev

如何在VB .Net中检查2个文本框的数据

来自分类Dev

如何在按下文本框(WPF)中的Control + Right时选择2个单词?

Related 相关文章

  1. 1

    如何将对象属性分配给 Angular 2 中的文本框?

  2. 2

    在Angular 2中的文本框中绑定值

  3. 3

    如何将2个文本框绑定到一个属性?

  4. 4

    如何将对象中的预填充数据绑定到 Angular 5 中的单选按钮

  5. 5

    如果我在文本框中输入字符“A”,Angular2 + Html 如何编写代码,它会显示 A Enter

  6. 6

    如何在 angular2 的剑道掩码文本框中转义掩码规则?

  7. 7

    在Angular 8中使用相同的ngModel属性在多个文本框中绑定不同的值

  8. 8

    如何使用选择将对象属性绑定到Angular2表单项

  9. 9

    如何将文本框对象绑定到ViewModel

  10. 10

    Angular2,TypeScript,如何将属性值读取/绑定到组件类(在ngOnInit中未定义)

  11. 11

    如何使用Angular JS在带有输入字段的文本框中添加文本并将其从文本框中删除?

  12. 12

    WPF:如何将对象绑定到组合框

  13. 13

    如何将一个文本框中的字符集转换成图2中的文本框效果?

  14. 14

    如何使用value属性在2个文本框中显示2个以上的值

  15. 15

    绑定到angular2中的组件属性

  16. 16

    如何遍历文本框中的文本?

  17. 17

    在Visual Basic中将数据从Form1中的文本框传递到打开的Form2中的文本框

  18. 18

    清除绑定到wpf中的静态属性的文本框

  19. 19

    如何将 12 位数字从富文本框移动到文本框 2

  20. 20

    Angular2中的输入属性绑定

  21. 21

    如何将对象从一个组件传递到另一个组件以在angular2中建立数据模型?

  22. 22

    如何内嵌数组以在yii2 ActiveForm中的文本框中显示它?

  23. 23

    如何将JavaScript重新绑定到angular2组件中的元素?

  24. 24

    如何从2个动态文本框中计算值并显示在第三个动态文本框中?

  25. 25

    在form1的文本框中输入的值未传递到form2的标签

  26. 26

    如何在Angular 9中创建自定义文本框组件

  27. 27

    如何从Angular.js中的json获取文本框值

  28. 28

    如何在VB .Net中检查2个文本框的数据

  29. 29

    如何在按下文本框(WPF)中的Control + Right时选择2个单词?

热门标签

归档