Question

大家好，我是Angular2和Ionic2的新手。我试图充分利用他们所有的功能。

我想根据div本身之前的select值动态填充div。

这将是html

<ion-item>
  <ion-label>Num of trips</ion-label>
  <ion-select [(ngModel)]="tripNum" (ngModelChange)="doTrips()">
    <ion-option value="1">1</ion-option>
    <ion-option value="2">2</ion-option>
    <ion-option value="3">3</ion-option>
  </ion-select>
  <ng-container *ngIf="tripNum"> //?? not sure about what in here.. 
    <div *ngFor="let trip of trips">
      <ion-item>
        <ion-label>Trip {{trip}}</ion-label>
      </ion-item>
    </div>
  </ng-container>
</ion-item>

我创建了一个接口Trips，声明为trip：Trips []

export interface Trips {
  duration : string;
  nofservices : number;
}

＆＃34; doTrips（）＆＃34;函数应该为trips []数组添加尽可能多的Trips，具体取决于tripNum。然后在我看来，* ngfor应该添加trip数组包含的项目，并最终将trip属性绑定到html thru [（ngModel）]。

希望问题很明确。我对使用什么感到困惑

Answer 1

您已使用ngModelChange，因此无需双向绑定。 [(ngModel)]是[ngModel]="tripNum" (ngModelChange)="doTrips($event)"的缩写，因此您可以使用它。

此外，您需要移动ng-container以外的ion-item才能使代码生效。所以你的模板看起来像这样：

<ion-item>
  <ion-label>Num of trips</ion-label>
  <ion-select [ngModel]="tripNum" (ngModelChange)="doTrips($event)">
    <ion-option value="1">1</ion-option>
    <ion-option value="2">2</ion-option>
    <ion-option value="3">3</ion-option>
  </ion-select>
</ion-item>


<ng-container *ngIf="tripNum"> 
  <div *ngFor="let trip of trips">
    <ion-item>
      <ion-label>Trip </ion-label>
    </ion-item>
  </div>
</ng-container>

你doTrips - 函数看起来像这样：

doTrips(tripNum: number) {
  // declare obj of type Trips
  let obj = <Trips>{}
  // loop to add number of objects based on the value of tripNum
  for(let i= 1; i<=tripNum; i++) {
    this.trips.push(obj);
  }
  this.tripNum = tripNum;
}

现在我们必须记住，添加的每个对象只是Trips类型的空对象，因此实际上没有值显示在模板中。但是，如果您需要/需要，可以在doTrips函数中指定值。

最后是DEMO。

<强>更新

现在我从评论中看到您要将默认值添加到nofservices，因此您的函数将如下所示：

doTrips(tripNum: number) {
  // loop to add number of objects based on the value of tripNum
  for(let i= 1; i<=tripNum; i++) {
    this.trips.push(<Trips>{duration:'',nofservices:0});
  }
  this.tripNum = tripNum;
}

请注意，您需要在trip的模板中添加属性名称，如下所示：

<ion-label>Trip {{trip.nofservices}}</ion-label>

angular2添加项目取决于所选值

1 个答案: