7
A
回答
10
首先在Component
,你必須聲明你要顯示的數組:
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
displayData : [];
constructor() {
this.displayData = [
{
"text": "item 1",
"value": 1
},
{
"text": "item 2",
"value": 2
},
{
"text": "item 3",
"value": 3
},
{
"text": "item 4",
"value": 4
},
{
"text": "item 5",
"value": 5
},
];
}
}
如果要更改代碼中的值,你可以通過做做到這一點:
// We iterate the array in the code
for(let data of this.displayData) {
data.value = data.value + 5;
}
,然後在視圖中,您可以打印出來是這樣的:
<ion-content class="has-header">
<ion-list *ngFor="let data of displayData; let i = index" no-lines>
<ion-item>Index: {{ i }} - Text: {{ data.text }} - Value: {{ data.value }}</ion-item>
</ion-list>
</ion-content>
請注意部分*ngFor="let data of displayData"
其中:
displayData
是我們在Component
let data of ...
定義的陣列定義了一個名爲data
新的變量,它表示每個displayData
陣列的元件。- 我們可以通過使用
data
變量和插值如{{ data.propertyName }}
來訪問每個數組元素的屬性。
+1
謝謝@sebaferreras ...你是天才.. –
+3
@sebaferreras我如何獲得索引? –
+0
@RaghavRangani我已經編輯了答案,在'ngFor'中包含索引 – sebaferreras
相關問題
- 1. 在Angularjs2/Ionic2中實現pdfmake
- 2. Ionic2 with angular2 issue while using ion-select with ngFor
- 3. Foreach in foreach [PHP]
- 4. LINQ forEach with Replace
- 5. C#Foreach with MySQL
- 6. Toach with foreach loop
- 7. ForEach with EditorFor
- 8. ForerunnerDB AngularJS2模塊
- 9. Ionic2/Typescript實現forEach循環
- 10. FOREACH in cypher - neo4j
- 11. 」with「macro in C
- 12. Upsert with $ in
- 13. WITH&UNNEST in BigQuery
- 14. scala foreach of 2-D List/Array in chisel with types issue
- 15. foreach:「in」v。「as」
- 16. Powershell foreach in pssession
- 17. AS3 dispatchEvent in forEach
- 18. Foreach in Linq
- 19. forEach in angular
- 20. ASP.MVC5 - Foreach with property array
- 21. foreach with jquery元素
- 22. mysql select with multiple「in」
- 23. PayPal with Braintree Drop-In
- 24. Scala XML with&in CDATA
- 25. HttpWebRequest with https in C#
- 26. SQL SELECT IN with like
- 27. rgb()with ggplot2 in R
- 28. pushViewController with tableViewController in viewController
- 29. Javascript:Window.Open with#sign in URL?
- 30. select2 with acts_as_taggable_on in Rails
http://ionicframework.com/docs/v2/components/#lists – agriboz
你想在哪裏做HTML,或在TypeScript的foreach? –