角2 - 如何向显示对象

的阵列内的数组对象这是我的JSON文件的示例角2 - 如何向显示对象

{ 
    "id": 5, 
    "url": "http://localhost:8000/api/v1/users/5/", 
    "username": "Najmuddin", 
    "email": "", 
    "groups": [ 
     { 
     "id": 1, 
     "url": "http://localhost:8000/api/v1/groups/1/", 
     "name": "KETUA UNIT SEKSYEN", 
     "permissions": [ 
      "Can add level", 
      "Can change level", 
      "Can delete level" 
     ] 
     } 
    ] 
    },

，这是我的代码

public getUser(){ 
    this.jobService.getUsers().subscribe(
    user => { 
     for (let i = 0; i < user.length; i++) { 
     this.user = user; 
     let username = user[i].username; --> i can get id,url,username,... 
     let group = user[i].groups; --> i only get the [object] but i want 
     to get the id, url, and name instead 
     } 
    }, 
); 
}

我只能得到和显示对象对于用户而言，无法获得组ID，URL和名称and permission [object]`。这是我错过的东西吗？

来源

2017-04-11 MunirohMansoor

如何'jobService.getUsers（）'样子？这是它返回的json？ –

@OferHerman是的..它返回我给出的json API作为上面的例子 – MunirohMansoor

在你的示例代码中，你正在给你的变量分配一个组数组。你可能想用这样的东西：'let groups = user [i] .groups;为（让群体组）{...}' –

试试这个代码

userlist: any; 
public getUser(){ 
    this.jobService.getUsers().subscribe(
    user => { 
     this.userlist=user; 
     for (let i = 0; i < user.length; i++) { 
     let username = this.userlist[i].username; 
     let group = this.userlist[i].groups; 
     let id = this.userlist[i].groups[0]?.id; 
     let url = this.userlist[i].groups[0]?.url; 
     console.log("********* start *******"); 
     console.log(username); 
     console.log(group); 
     console.log(id); 
     console.log(url); 
     console.log("********* end *******"); 
     } 
    }, 
); 
}

看跌的console.log（this.username）如果执行console.log（用户名）告诉你不确定。并删除？如果你确信组数组不为空

为* ngFor你可以像这样

<div *ngFor="let user of userlist"> 
     <p>{{user.username}} - {{user.group[0]?.id}} -{{user.groups[0]?.url}}<p> 
    </div>

来源

2017-04-11 13:02:47

哇..它的工作原理..但我如何显示它在我的临时使用ngFor？ – MunirohMansoor

，我得到了这个错误'不能读取属性'网址'undefined' – MunirohMansoor

@uetoaya你得到的网址undefined，因为你的一些json可能没有任何url。回答编辑与* ngFor也。如果安全naviagtion使用* ngIf =“user.group [0] .url”？不行。 –

你可能想要做一个嵌套ngFor

<div *ngFor="let user of userlist"> 
    <p>{{user.username}}<p> 
    <p *ngFor="let group of user.groups">{{group.id}} ...<p> 
</div>

这样，如果user.groups没有填充你不会有错误。

来源

2017-04-11 13:30:22 tesgo

没有必要订阅您可以显示使用Observable

public let users$: Observable<any>; 

public getUser(){ 
    users$ = this.jobService.getUsers(); 
}

，并在您的视图列表：

<div *ngFor='let user of users | async'> 
    <p>{{user.id}}</p> 
    <p>{{user.name}}</p> 
    <p>{{user.email}}</p> 
    <p>{{user.url}}</p> 
    <h2>groups:</h3> 
    <div *ngFor='let group of user.groups'> 
     <p>{{group.id}}</p> 
     <p>{{group.name}}</p> 
     <p>{{group.url}}</p> 
     <h3>Permissions:</h3> 
     <div *ngFor='let permission of group.permissions'> 
      <p>{{permission}}</p> 
     </div> 
    </div> 
</div>

来源

2017-04-11 15:05:00

角2 - 如何向显示对象

回答

相关问题