無法在角2模板顯示對象的對象數組

我想在角度顯示對象的值2個模板，特別是當我嘗試使用ngFor給了我一個錯誤說無法在角2模板顯示對象的對象數組

EXCEPTION獲取對象數組：未捕獲（承諾）：錯誤：錯誤./SgDetailComponent類SgDetailComponent - 內聯模板：15：7引起：無法讀取未定義的屬性'標記' 我可以獲取字符串/數字屬性，但不是對象屬性。

這裏是我的component.ts

@Component({ 
    selector: 'app-sg-detail', 
    templateUrl: './sg-detail.component.html', 
    styleUrls: ['./sg-detail.component.scss', '../../app.component.scss'] 
}) 
export class SgDetailComponent implements OnInit { 

    errorMessage: string; 
    sgDetail: Sg; 
    groupId: string; 
    ipPermissions: IpPermissions[]; 
    userIdGroupPairs: UserIdGroupPairs[]; 
    opPermissionsEgress: IpPermissionsEgress[]; 
    tags: Tags[]; 

    constructor(private activatedRoute: ActivatedRoute, private sgService: SgService) { } 

    ngOnInit() { 
    this.activatedRoute.params.subscribe((params: Params) => { 
     let groupId = params['groupId']; 
     this.groupId = groupId; 
    }); 
    this.getSgsByGroupId(this.groupId); 
    } 
    getSgsByGroupId(groupId: String) { 
    this.sgService.getSgByGroupId(groupId) 
    .subscribe(
     sgDetail => this.sgDetail = sgDetail, 
     error => { 
     this.errorMessage = error.getMessage(); 
     console.error(error.getDescription()); 
     }); 
    } 
}

這裏是我的component.html

<div class="container app_container"> 
    <ul class="app_list"> 
     <li *ngIf="sgDetail" class="app_list-item"> 
      <p>GroupId: {{sgDetail.groupId}}</p> 
      <p>GroupName: {{sgDetail.groupName}}</p> 
     </li> 
     <li *ngFor="let tag of sgDetail.tags" class="app_list-item"> 
      //this loop sgDetail.tags errors out 
     </li> 
    </ul> 
</div>

，這裏是我的model.ts

export interface Sg { 
ownerId: number; 
groupName: string; 
groupId: string; 
description: string; 
ipPermissions: IpPermissions[]; 
ipPermissionsEgress: IpPermissionsEgress[]; 
vpcId: string; 
tags: Tags[]; 
} 

export interface IpPermissions { 
ipProtocol: string; 
fromPort: number; 
toPort: number; 
userIdGroupPairs: UserIdGroupPairs[]; 
ipRanges: Array<number>; 
prefixListIds: Array<number>; 
} 

export interface UserIdGroupPairs { 
userId: number; 
groupName: string; 
groupId: string; 
vpcId: string; 
vpcPeeringConnectionId: string; 
peeringStatus: string; 
} 

export interface IpPermissionsEgress { 
ipProtocol: string; 
fromPort: number; 
toPort: number; 
userIdGroupPairs: UserIdGroupPairs[]; 
ipRanges: Array<number>; 
prefixListIds: Array<number>; 
} 

export interface Tags { 
key: string; 
value: string; 
}

來源

2017-04-23 amulamul

我認爲當你使用'讓sgDetail.tags'的sgDetail你重新分配'sgDetail'，失去對你的組件設置的屬性參考。嘗試使用其他名稱，例如'let tag of sgDetail.tags' –

@AlexandreAngelim仍然無法正常工作。我認爲錯誤是在嘗試獲取標籤屬性時發生的。 – amulamul

我在那裏看不到任何錯誤。稍微調試一下？ console.log sgDetail在'getSgsByGroupId'上賦值之後。 –

錯誤是由Asynchorouse call→getSgsByGroupId造成的，這意味着getSgsByGroupId的結果在角度呈現視圖時尚未出現。

嘗試角都提供了安全的方式：

<li *ngFor="let tag of sgDetail?.tags" class="app_list-item"> 
</li>

來源

2017-04-24 01:53:16 Pengyy

錯誤來自編譯時間，所以當我使用sgDetail？.tags時，它似乎跳過了sgDetails在編譯時存在標籤的困難情況，所以沒有出錯。儘管如此，我仍然需要找到一個解決方案，但現在我將接受這個答案作爲臨時解決方案，並感謝一百萬人。 :) – amulamul

-1

試試這個： -

<ul *ngIf="let tag of sgDetail"> 
    <li>tag.groupId</li> 
<ul> 

But before looping or using *ngIf you should print sgDetail as a json like this:- 
    {{sgDetail | json}}

來源

2017-04-24 00:25:26

無法在角2模板顯示對象的對象數組

回答

相關問題