第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Angular 中循環(huán)遍歷未知屬性的數(shù)組對象

如何在 Angular 中循環(huán)遍歷未知屬性的數(shù)組對象

慕的地6264312 2021-10-14 13:45:09
所以我發(fā)現(xiàn)很難表達我的問題的標題,我想做的是循環(huán)遍歷對象數(shù)組,但我不知道對象的屬性,因為它是動態(tài)的并且來自數(shù)據(jù)庫。下面是一個數(shù)組對象的例子:[{    "id": 9,    "event_id": 13,    "details": {        "firstname": "Ralph",        "lastname": "Marvin",        "email_address": "ralphmarvin@email.com",        "phone_number": "0987654321"    }}, {    "id": 10,    "event_id": 13,    "details": {        "firstname": "John",        "lastname": "X Doe",        "email_address": "john_x_doe120@xmail.com",        "phone_number": "0009876543"    }}, {    "id": 11,    "event_id": 13,    "details": {        "firstname": "Wari",        "lastname": "Gumah",        "email_address": "gumahwarihanna@eeee.com",        "phone_number": "120029182765"    }}]我想在如下所示的表格中顯示對象的詳細信息部分:firstname     lastname      email_address       phone_number以及每個值下的適當值。使用 Angular 8。我只是不知道如何使用 *ngFor 來訪問我什至不知道的屬性。我正在嘗試做的甚至是可能的,如果是,請告訴我如何做。謝謝!。
查看完整描述

2 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

您可以通過keyvalue pipe訪問詳細信息對象來迭代對象鍵/值作為內部 for 循環(huán) 。


網址:


  <table>

     <tr>              

       <th>Firstname</th>

       <th>lastname</th>

       <th>email_address</th>

       <th>phone_number</th>

     </tr>

     <tr *ngFor="let listItem of yourList" >

       <td *ngFor="let innerItem of listItem.details | keyvalue"> 

         {{innerItem.value}

       </td>

     </tr>

   </table>

填充列表


   yourList = [{

    "id": 9,

    "event_id": 13,

    "details": {

      "firstname": "Ralph",

      "lastname": "Marvin",

      "email_address": "ralphmarvin@email.com",

      "phone_number": "0987654321"

    }

    }, {

    "id": 10,

    "event_id": 13,

    "details": {

      "firstname": "John",

      "lastname": "X Doe",

      "email_address": "john_x_doe120@xmail.com",

      "phone_number": "0009876543"

   }

   }, {

   "id": 11,

   "event_id": 13,

   "details": {

     "firstname": "Wari",

     "lastname": "Gumah",

     "email_address": "gumahwarihanna@eeee.com",

     "phone_number": "120029182765"

    }

   }]


查看完整回答
反對 回復 2021-10-14
?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

您可以在組件上實現(xiàn)一些邏輯來獲取一組字段。它看起來像這樣:(我假設項目作為 @Input() 出現(xiàn)在您的組件中,但它可能是另一個來源)


@Input() items: Item[];

fields: Set<string>;

ngOnChanges(changes) {

  if(!changes.items || !this.items) return;

  this.fields= new Set(this.items.flatMap(item => Object.keys(item.details)))

}

然后在模板中


<tr *ngFor="let item of items">

   <td *ngFor="let field of fields">{{item.details[field]}}</td>

</tr>


查看完整回答
反對 回復 2021-10-14
  • 2 回答
  • 0 關注
  • 254 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號