如何使用 *ngFor 中的動態鍵獲取數組：Angular 2+

Question

這是我的 object：

dynamicData = 
    {
       uni_id:{options: [1,2,3,4]},
    }

我想像這樣使用 ngfor 循環：

<option *ngFor="let opt of dynamicData.uni_id.options" value="{{opt.value}}">{{ opt.label }}</option>

問題是：uni_id 是動態的並且在運行時可用。 uni_id 鍵本身是動態的。 它可以是 uni_id5、uni_id7 來自 db 的任何內容我如何在模板中使用它

Answer 1

您可以使用鍵值keyvalue動態循環通過 object 屬性。

試試這樣：

  <ng-container *ngFor="let opt of dynamicData | keyvalue">
    <option  *ngFor=" let item of dynamicData[opt.key].options" value="{{item}}">{{item }}</option>
  </ng-container>

工作演示

Answer 2

請像這樣使用它

<option *ngFor="let opt of dynamicData.uni_id?.options" value="{{opt.value}}">{{ opt.label }}</option>

這樣你可以檢查uni_id中是否有數據然后只顯示

如果您獲得 uni_id 的動態值，那么

在 ts 文件中

let uniqueId = Object.keys(this.dynamicData).filter(key => key.startsWith('uni_id'))[0]
list = this.dynamicData.uniqueId

在 html 文件中

 <option *ngFor="let opt of list.options" value="{{opt.value}}">{{ opt.label }}</option>

Answer 3

您可以創建一個包含鍵名的變量：

keyName ='uni_id';
dynamicData = {
    uni_id: { options: [1, 2, 3, 4] }
};

並在 HTML 模板中使用此密鑰：

<select>
    <option  
       *ngFor=" let item of dynamicData[keyName].options" 
        value="{{item}}">
      {{item }}
    </option>
</select>

它可以在 stackblitz 示例中看到。