如何使用多个ng

时间:2017-11-10 03:01:27

标签: angular ionic2 ionic3

  

我想向用户显示0 - >术语到下拉列表

Plase check 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>
  

//这是问题 - &gt;如何再次使用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) {
  }
}

2 个答案:

答案 0 :(得分:2)

实际上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>

答案 1 :(得分:0)

数组名称应为users。另外,使用ngValue分配值。

 <ion-option *ngFor="let i of users" [ngValue]="i.term" >
      {{i.term}}
 </ion-option>