角度 2 根据所选值添加项目

Question

大家好，我是 Angular2 和 Ionic2 的新手。 我尽量使用它们的所有功能。

我想根据 div 本身之前的选择值动态填充 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接口，声明为trips:Trips[]

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

“doTrips()”函数应该根据tripNum 向trips[] 数组添加尽可能多的Trips。然后在我看来，*ngfor 应该添加与trips 数组包含的一样多的项目，并最终通过[(ngModel)] 将trip 属性绑定到html。

希望问题很清楚.. 我对使用什么有点困惑

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-function 看起来像这样：

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>