动态创建的元素具有不同的绑定

Question

我是Angular 2的新手。我构建的应用程序可以启动多个计时器。当我单击"添加计时器"时，创建了一个新的离子卡具有不同的模型。

问题现在即，对于用户创建的所有计时器的小时都具有相同的值。

计时器应同时运行，应在不同时间停止。在Angular 2中进行这样的事情的正确方法是什么？

任何资源都会有所帮助！

    startTimer(t) {
    var eventDate: Date = new Date();
    this.timerStarted = true;
    this.hours = '00';
    this.minutes = '00';
    this.seconds = '00';
    var time = +moment(eventDate).add(t, 'minutes')
    var timer = Observable.interval(1000).map((x) => {
                    this.diff = Math.floor((+time - new Date().getTime()) / 1000);
                }).subscribe((x) => {
                    this.hours = this.getHours(this.diff);
                    this.minutes = this.getMinutes(this.diff);
                    this.seconds = this.getSeconds(this.diff);
                    if(this.diff  === 0) {
                      timer.unsubscribe();
                      this.hours = '00'
                      this.minutes = '00'
                      this.seconds = '01'
                    }
                });

  }
  addTimer(n) {
    this.timerNumber++;
    this.components.push({
      timerNum: "Timer" + this.timerNumber,
      comp: n
    });
    console.log(this.components)
  }

html

<ion-content padding>
  <ion-fab top right edge>
    <button ion-fab (click)="addTimer()"><ion-icon name="add"></ion-icon></button>
  </ion-fab>
  <ion-grid>
    <ion-row>
        <ion-col col-4 *ngFor="let c of components">
          <ion-card class="card card-md">
            <ion-row>
            <ion-col class="col" col-6>
              <ion-item>
                <ion-label color="primary" stacked>Produktname</ion-label>
                <ion-input type="text" placeholder="Produktname"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col class="col" col-6>
              <ion-item>
                <ion-label color="primary" stacked>Zeit</ion-label>
                <ion-input type="text" placeholder="Zeit" [(ngModel)]="c.timer"></ion-input>
              </ion-item>
            </ion-col>
            </ion-row>
            <ion-item class="no-bottom-border item">
              <button ion-button large full clear class="timer-button timer-text" *ngIf="timerStarted">{{hours + ':' + minutes + ':' + seconds}}</button>
            </ion-item>
            <ion-item class="no-bottom-border">
              <button ion-button icon-left clear color="danger" small (click)="initTimer()" item-left>
                    <ion-icon name="refresh"></ion-icon>
                    Reset
                </button>
              <button ion-button icon-left clear small color="primary" *ngIf="h" (click)="pauseTimer()" item-right>
                    <ion-icon name="pause"></ion-icon>
                    Pause
                </button>
              <button ion-button icon-left clear small color="primary" (click)="resumeTimer()" item-right>
                    <ion-icon name="play"></ion-icon>
                    Resume
                </button>
              <button ion-button icon-left clear small color="primary" (click)="startTimer(c.timer)" item-right>
                    <ion-icon name="play"></ion-icon>
                    Start
                </button>
            </ion-item>
          </ion-card>
        </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

请勿使用"此"来保留数据。将计时器数据附加到每个项目。这样的东西：

  @Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div *ngFor="let item of items">
        {{item.name}}
        <div *ngIf="item.timer">timer:{{item.x}}</div>
        <button (click)="start(item)">start</button>
        <button (click)="stop(item)">stop</button>
      </div>
    </div>
  `,
})
export class App {
  name: string;
  items = [{name: 'julia'}, {name: 'anna'}];
  start(item) {
    item.timer = Observable.interval(1000)
      .do(x=>{
        item.x = x;
      })
      .subscribe();
  }
  stop(item) {
    if (item.timer) {
      item.timer.unsubscribe();
      item.timer = null;
    }
  }
  constructor() {
  }
}