无法读取undefined angular4的属性'iname'

时间:2017-10-02 22:04:19

标签: html angular typescript

我有这个界面item.ts: -

export interface item{
$key?:string;
available?:boolean;
countable?:boolean;
iname?:string;
price?:string;
desc?:string;
image?:string;
}

项目组件item.componenet.ts是: -

import { Component, OnInit } from '@angular/core';
//import { AdditemsService } from '../../services/additems.service';
import { item } from '../../item';

@Component({
  selector: 'app-items',
  templateUrl: './items.component.html',
  styleUrls: ['./items.component.css']
})
export class ItemsComponent implements OnInit {

items:item={
$key :"",
available :true,
countable :true,
iname :"",
price :"",
desc :"",
image :""
};

  constructor() { }

  ngOnInit() {
  }

}

和html表单item.componenet.html是: -

      <form novalidate #fo="ngForm" (ngSubmit)="mySubmit(fo)">
     <div class="form-group">
      <label for="iname">Item Name : </label>
     <input type="text" class="form-control" name="iname" 
      [(ngModel)]="item.iname" #iteminame="ngModel" required minlength="3">
         </div> 
           <div *ngIf="iteminame.errors?.required && iteminame.touched" 
                     class="alert alert-danger"></div>
                  <div *ngIf="iteminame.errors?.minlength && 
                                    iteminame.touched" class="alert alert-
                                        danger"></div>
                       <button type="submit" class="btn btn-
                                                    success">Submit</button>
                               </form>

ngModel无法看到界面中创建的iname的主要问题。我在组件中导入了界面,之后我使用ngModel来使这个文本框可以在文本框中添加和验证。

但我总是看到这个错误,无法读取未定义的属性'iname'。

我认为错误就在这一行。

 <input type="text" class="form-control" name="iname" [(ngModel)]="item.iname" #iteminame="ngModel" required minlength="3">

任何帮助??

1 个答案:

答案 0 :(得分:2)

您有[(ngModel)]="item.iname"而不是[(ngModel)]="items.iname"。只是一个错字。没有&#34;项目&#34;你班上的财产,只有&#34;项目&#34;。