無法讀取 angular forms 中未定義的屬性“id”

Question

我正在開發一個 angular 應用程序，該應用程序由一個父組件（產品）組成，旨在使用分頁和子組件列出詳細信息產品詳細信息以查看我使用過 angular ZAC68B62ABFD6A9FE26E8AC4236CCE8 的各個產品的詳細信息。 表單頁面正在從寧靜的 api 正確加載數據但此外，當我從列表頁面導航到單個產品詳細信息顯示頁面時，我在控制台中收到以下錯誤，我無法弄清楚這個錯誤的原因。

ERROR TypeError: Cannot read property 'id' of undefined
    at ProductDetailsComponent_Template (product-details.component.html:7)
    at executeTemplate (core.js:12210)
    at refreshView (core.js:12049)
    at refreshComponent (core.js:13499)
    at refreshChildComponents (core.js:11770)
    at refreshView (core.js:12105)
    at refreshEmbeddedViews (core.js:13445)
    at refreshView (core.js:12076)
    at refreshComponent (core.js:13499)
    at refreshChildComponents (core.js:11770)

代碼詳情如下：

將 model class 映射到 map 響應形式 restful Z8A5DA52ED126447D359E70C057218A

export interface productDetailsData{

    id:number;
    items:string;
    brand:string;
    colour:string;
    size:string;
    type:string;
}


export class ProductDetailsComponent implements OnInit {

  idval:number;
 productDetail:productDetailsData;

  constructor(private router:Router,private route:ActivatedRoute,private randomUser:RandomuserService){
    this.route.params.subscribe((param:Params) =>{
      this.idval=+param['id'];
      console.log(this.idval);
    });
  }
  ngOnInit(): void {
    this.randomUser.getIndividulProductDetail(this.idval).subscribe(data => {
      /*** fetching the details from api *****/
      this.productDetail={...data};
      console.log('the data form response ',this.productDetail);
      
   });
  }


  onSubmit(form:NgForm){
   console.log(form.value);
   this.productDetail={...form.value};
   console.log(this.productDetail);
   this.randomUser.saveData(this.productDetail).subscribe(data => {
     console.log('successfully stired'); });
  }
}



<div class="container">
    <div class="row">  
    <div class=" .col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="form-group" >
       <label for="id">ID</label>
       <input type="text" id="id" class="form-control" ngModel name="id" [(ngModel)]="productDetail.id">
        </div>
         
        <div class="form-group">
         <label for="id">ITEMS</label>
         <input type="text" id="items" class="form-control" ngModel name="items" [(ngModel)]="productDetail.items">
         </div>
                 
        <div class="form-group">
        <label for="brand">Brand</label>
        <input type="text" id="brand" class="form-control" ngModel name="brand" [(ngModel)]="productDetail.brand" >
        </div>

        <div class="form-group">
        <label for="colour">COLOUR</label>
        <input type="text" id="colour" class="form-control" ngModel name="colour" [(ngModel)]="productDetail.colour">
        </div>
        <div class="form-group">
        <label for="size">size</label>
        <input type="text" id="size" class="form-control" ngModel name="size" [(ngModel)]="productDetail.size">
        </div>
        <div class="form-group">
        <label for="type">TYPE</label>
        <input type="text" id="type" class="form-control" ngModel name="type" [(ngModel)]="productDetail.type">
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>

    </form>
    </div>   
    </div>
</div

Answer 1

您可能會收到該錯誤，因為productDetail最初沒有值。 要么初始化它，要么使用Elvis 運算符(?)，如下所示：

<input type="text" id="id" class="form-control" ngModel name="id [(ngModel)]="productDetail?.id">

Answer 2

您使用productDetail作為ngModel這意味着它是雙向綁定。

因此，一旦視圖被初始化，它的初始值是undefined ，它就會開始評估productDetail ，因此會出現錯誤。

嘗試在構造函數或ngOnInit中初始化它，如下所示，

this.productDetail = {} as productDetailsData;

快樂編碼.. :)