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

Question

我对Angular 2非常新颖。我陷入了动态创建的元素。 我构建的应用程序可以启动多个定时器。当我点击添加计时器时，会使用不同的型号创建一个新的离子卡。

现在的问题是，即this.minutes对于用户创建的所有计时器具有相同的值。

定时器应该同时运行，并应该在不同的时间停止。在角度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() { 

    } 
}