angular 2 根据所选值添加项目

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，声明为 trips:Trips[]

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

"doTrips()" 函数应根据 tripNum 添加尽可能多的 Trip 到 trip[] 数组。然后在我看来 *ngfor 应该添加与 trips 数组包含的项目一样多的项目，并最终将 trip 属性绑定到 html 通过 [(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 函数中赋值，如果你 want/need.

终于有一个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>

angular 2 根据所选值添加项目

angular2 add items dependig on selected value

ionic2

ngfor

angular