角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 - 如何向顯示對象

回答

相關問題