无法在角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模板显示对象的对象数组

回答

相关问题