[英]How to print 1 to x using ngFor in ionic 3 using multiple ngFor
我想向用戶顯示0->下拉菜單中的字詞
放置檢查https://stackblitz.com/edit/ionic-djze7u
home.html的
<ion-content padding>
<ion-card>
<ion-card-content *ngFor="let item of users">
<ion-row>
<ion-label>{{item.name}}:</ion-label>
<ion-label>{{item.age}}</ion-label>
<ion-select [(ngModel)]="count">
<ion-option value="0" selected>0</ion-option>
//這里是問題->如何再次使用ngfor來制作一個lopp? //以及如何將i的值打印到user.terms?
<ion-option ngfor="let i of item.term" value="{{i}}" >
{{i}}
</ion-option>
</ion-select>
</ion-row>
</ion-card-content>
</ion-card>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
users:any = [
{ name: 'Composite Factory', age: 1, term:2 },
{ name: 'Todd', age: 2, term:1 },
{ name: 'Lisa', age: 3, term:4 }
];
constructor(public navCtrl: NavController) {
}
}
實際上ngFor錯誤,請更改為
<ion-content padding>
<ion-card>
<ion-card-content *ngFor="let item of users">
<ion-row>
<ion-label>{{item.name}}:</ion-label>
<ion-label>{{item.age}}</ion-label>
<ion-select [(ngModel)]="count">
<ion-option value="0" selected>0</ion-option>
<ion-option *ngFor="let i of users" [value]="i.term" >
{{i.term}}
</ion-option>
</ion-select>
</ion-row>
</ion-card-content>
</ion-card>
</ion-content>
數組名稱應為users
。 另外,請使用ngValue
分配值。
<ion-option *ngFor="let i of users" [ngValue]="i.term" >
{{i.term}}
</ion-option>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.