TypeError：無法讀取編輯視圖模板上未定義的屬性“ Id”-Angular 2

Question

好吧，所以我一直面臨着可怕的事情：

TypeError：無法讀取未定義的屬性“ Id”

在開始之前：

@ angular / cli：1.4.4節點：6.10.3 npm：3.10.10

為了提供更多上下文，我試圖通過從組件類中獲取ID並在單個方向上流動以顯示視圖模板的方式，執行一種數據綁定方式來編輯組件。 就這樣。

以下是希望能夠重現該問題並找出解決方案的以下內容。

1. SQL表定義：

CREATE TABLE [ExampleTable]
(
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Col2] [nvarchar](50) NULL,
    [Col3] [int] NULL,
    [Col4] [int] NULL
)

2. ExampleTable.ts

 export interface ExampleTable { Id; Col2; Col3; Col4; } export class CreateExampleTableModel { SomeForeignKey?: number; Col2: string; Col2: number; Col2: number; } export class EditExampleTable { } 

3. empty-tables.component.ts

 import { Component } from '@angular/core'; import { Router } from "@angular/router"; import { EmptyTableServiceService } from "../../services/empty-table.service"; import { EmptyTable } from "../../models/outModels/EmptyTable"; @Component({ selector: 'app-empty-tables', templateUrl: './empty-tables.component.html', styleUrls: ['./empty-tables.component.css'] }) export class EmptyTablesComponent { //Table data emptyTable: EmptyTable[]; constructor( private router: Router, private emptyTableServiceService: EmptyTableServiceService) { } edit(emptyTable: EmptyTable) { this.router.navigate(['emptyTables/edit', emptyTable.Id]); } } 

4. EmptyTableService：

 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import { EmptyTable, CreateExampleTableModel } from "../models/outModels/EmptyTable"; @Injectable() export class EmptyTableService { constructor(private http: Http, ) {} getEmptyTable(Id: string): Promise<EmptyTable> { return this.http.get(`${this.auth.apiUrl}/api/emptyTables/get/${Id}`, { headers: this.auth.header }) .toPromise() .then(response => response.json() as EmptyTable) .catch(error => this.logging.handleError(error)); } update(emptyTable: EmptyTable): Promise < EmptyTable > { return this.http.post(`${this.auth.apiUrl}/api/emptyTables/update`, JSON.stringify(emptyTable), { headers: this.auth.header }) .toPromise() .then(response => response.json() as EmptyTable) .catch(error => this.logging.handleError(error)); } } 

5. EmptyTableEditComponent：

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { EmptyTableService } from "../../../services/empty-table.service"; import { EmptyTable } from "../../../models/outModels/EmptyTable"; export class EmptyTableEditComponent implements OnInit { model: EmptyTable; constructor( private route: ActivatedRoute, private router: Router, private emptyTableService: EmptyTableService ) {} ngOnInit() { this.loading = true; this.route.paramMap .switchMap((params: ParamMap) => this.emptyTableService.getEmptyTable(params.get('Id'))) .subscribe(emptyTable => { this.model = emptyTable; }); } goBack(): void { this.router.navigate(['/emptyTables']); } save(): void { this.loading = true; this.emptyTableService.update(this.model).then( emptyTable => { this.model = emptyTable; }, error => { console.log(error); } ); } } 

我的懷疑是，在我的getEmptyTable(Id: string)中返回EmptyTables的Promise是，我將Id參數作為字符串值傳遞，而在我的數據庫表定義中，它是一個integer但是根據我的理解，URL參數始終為字符串格式。 我嘗試了以下方法：

一世。 將我的Id設置為number數據類型， apiUrl像這樣在apiUrl的Id參數上調用toString() ：

 getEmptyTable(Id: number): Promise<EmptyTable> {
        return this.http.get(`${this.auth.apiUrl}/api/emptyTables/get/${Id.toString()}`, { headers: this.auth.header })
            .toPromise()
            .then(response => response.json() as EmptyTable)
            .catch(error => this.logging.handleError(error));
    }

但這並沒有太大的區別。 最后，請找到我渲染的視圖模板：

 <div class="container"> <p-messages [(value)]="messages"></p-messages> <p-panel *ngIf="model"> <p-header> Edit EmptyTable {{model.Name}} </p-header> <form name="form" (ngSubmit)="save()"> <div class="form-group"> <label>Col 2</label> <input type="text" class="form-control" name="col2" [(ngModel)]="model.Col2" required /> </div> <div class="form-group"> <label>Col 3</label> <input type="text" class="form-control" name="col3" [(ngModel)]="model.Col3" required /> </div> <div class="form-group"> <button pButton type="button" class="ui-button-secondary" (click)="goBack()" label="Back" icon="fa-chevron-left"></button> <button pButton class="ui-button-success pull-right" label="Save" icon="fa-save"></button> <app-loader *ngIf="loading"></app-loader> </div> </form> </p-panel> </div> 

總結一下，它抱怨以下功能：

  edit(emptyTable: EmptyTable) {
        this.router.navigate(['emptyTables/edit', emptyTable.Id]);
    }

注意：請勿運行摘要，因為它們沒有輸出。 這是格式化我的代碼的最快方法。 手動壓痕並未切割。

Answer 1

在下面發現了問題：

 <ng-template let-user="rowData" pTemplate="body">
                    <button type="button" pButton (click)="edit(distributor)" icon="fa-edit"></button>
                </ng-template>

let-user應該已經更改為let-distributor和所有作品。