无法读取未定义角度 4 的属性“名称”

Question

我有这个界面item.ts:-

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

items 组件 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">

有什么帮助吗？？

Answer 1

你有[(ngModel)]="item.iname" 而不是[(ngModel)]="items.iname"。只是一个错字。您的班级没有“item”属性，只有“items”。