如何基於索引訪問Angular 4中的數組數組中的元素？

我想只在Angular 4的表格中迭代陣列的第一個元素（對於電視廣告1而言，從2017年2月10日到2017年1月29日爲止的幾周內）。但是我面臨着挑戰，因爲它是遍歷表中的所有元素（對於所有電視廣告1,2,3,4）。如何基於索引訪問Angular 4中的數組數組中的元素？

請在下面找到我的代碼： JSON：

 public calendarTable = [ 
     { name: "TV AD1", 
      weeks: [ 
      { period: "2/10/2017", price: "400" }, 
      { period: "9/10/2017", price: "800" }, 
      { period: "16/10/2017", price: "200" }, 
      { period: "23/10/2017", price: "500" }, 
      { period: "30/10/2017", price: "600" }, 
      { period: "6/11/2017", price: "800" }, 
      { period: "13/11/2017", price: "700" }, 
      { period: "20/11/2017", price: "800" }, 
      { period: "27/11/2017", price: "900" }, 
      { period: "4/12/2017", price: "400" }, 
      { period: "11/12/2017", price: "800" }, 
      { period: "18/12/2017", price: "200" }, 
      { period: "25/12/2017", price: "500" }, 
      { period: "1/1/2018", price: "600" }, 
      { period: "8/1/2018", price: "800" }, 
      { period: "15/1/2018", price: "700" }, 
      { period: "22/1/2018", price: "800" }, 
      { period: "29/1/2018", price: "900" } 
      ] 
     }, 
     { name: "TV AD2", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { period: "4/12/2017", price: "400" }, 
      { period: "11/12/2017", price: "800" }, 
      { period: "18/12/2017", price: "200" }, 
      { period: "25/12/2017", price: "500" }, 
      { period: "1/1/2018", price: "600" }, 
      { period: "8/1/2018", price: "800" }, 
      { period: "15/1/2018", price: "700" }, 
      { period: "22/1/2018", price: "800" }, 
      { period: "29/1/2018", price: "900" } 
      ] 
      }, 

     { name: "TV AD3", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { period: "4/12/2017", price: "400" }, 
      { period: "11/12/2017", price: "800" }, 
      { period: "18/12/2017", price: "200" }, 
      { period: "25/12/2017", price: "500" }, 
      { period: "1/1/2018", price: "600" }, 
      { period: "8/1/2018", price: "800" }, 
      { period: "15/1/2018", price: "700" }, 
      { period: "22/1/2018", price: "800" }, 
      { period: "29/1/2018", price: "900" } 
      ] 
      }, 

     { name: "TV AD4", 
     weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { period: "4/12/2017", price: "400" }, 
      { period: "11/12/2017", price: "800" }, 
      { period: "18/12/2017", price: "200" }, 
      { period: "25/12/2017", price: "500" }, 
      { period: "1/1/2018", price: "600" }, 
      { period: "8/1/2018", price: "800" }, 
      { period: "15/1/2018", price: "700" }, 
      { period: "22/1/2018", price: "800" }, 
      { period: "29/1/2018", price: "900" } 
      ] 
      } 
    ]

HTML：

<thead> 
        <tr class="black-muted-bg" *ngFor="let item of calendarTable" > 
         <th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th> 

        </tr> 
       </thead>

請幫助我在這方面

來源

2017-10-18 Neha Uniyal

直接使用第一個元素，然後重複周。 –

只需添加[0]您calenderTable ...看看下面的代碼...

<thead> 
       <tr class="black-muted-bg" *ngFor="let item of calendarTable[0]" > 
        <th class="align-right" *ngFor="let data of item.weeks">{{data.period}}</th> 

       </tr> 
      </thead>

，或者你可以去這樣的...

<thead> 
       <tr class="black-muted-bg" > 
        <th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th> 

       </tr> 
      </thead>

來源

2017-10-18 07:27:53

輝煌。謝謝你。 –

你也可以請建議如何添加分頁到表。 –

確定...在此處查看http：//www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls ... –

提取陣列&循環之前保持在一個變量。因爲calendarTable是一個對象數組calendarTable[0]會給第一個對象& calendarTable[0].weeks會給周鍵的值從該對象

var toLoop = calendarTable[0].weeks;

來源

2017-10-18 07:21:11 brk

取數組中的第一項（calendarTable）並循環遍歷數週。

<thead> 
    <tr class="black-muted-bg"> 
     <th class="align-right" *ngFor="let data of calendarTable[0].weeks"> 
      {{data.period}} 
     </th> 
    </tr> 
</thead>

來源

2017-10-18 07:28:15 MarkiE

如果您需要動態地選擇每個表的對象，你可以這樣做：

在你服務：

private calendarTable = [ 
    // this is the table you already have 
]; 

getAdsNames(): string[] { 
    return Array.from(this.calendarTable, ad => ad.name); 
} 

getAd(adName: string): any { 
    return this.calendarTable.filter(ad: => ad.name === adName)[0]; 
}

在你組件：

availableAds: string[]; 
activeAd: any; 

ngOnInit() { 
    this.availableAds = this.myService.getAdsNames(); 

    // Loads the first ad from the list 
    this.activeAd = this.setActiveAd(this.availableAds[0]); 
} 

setActiveAd(adName: string) { 
    this.activeAd = this.myService.getAd(adName); 
}

在您的模板：

<thead> 
    <tr class="black-muted-bg"> 
    <th class="align-right" *ngFor="let week of activeAd.weeks">{{week.period}}</th> 
    </tr> 
</thead> 

<!-- Change between different ads --> 
<select [(ngModel)]="selectedAd" (ngModelChange)="setActiveAd($event)"> 
    <option *ngFor="let ad of availableAds" [ngValue]="ad"> 
    {{ ad }} 
    </option> 
</select>

如果您不需要動態更改廣告，還是應該做一個service處理您data，只是要求值，當你需要它（例如在組件的init中 - 在ngOnInit方法中）並使其可用於模板。

P.S .:您應該避免使用any，因爲我已經使用（爲簡化示例）併爲您的廣告創建了model。

乾杯

來源

2017-10-18 08:10:31 mdentinho

如何基於索引訪問Angular 4中的數組數組中的元素？

回答

相關問題