Angular2 - 模型是正确的但是在推送到数组

Question

在我的Angular2应用程序（使用angular-cli生成）中，当我执行array.push时，模型（由记录的对象/数组证明）是正确的，但是View将所有项目都覆盖为等同于新推的项目。我看到这反映在我的UI中。

我预计模型和视图将保持同步，并且当新项目被推送到数组的底部时，数组中的任何先前项目都将保持原样。

有关视图如何被覆盖的任何想法？

• 请注意，主要的罪名是plusLift（）。
• Github for app

我有一个Angular2模型，其对象有一些嵌套数组。我还有一些操作模型的函数：

lift.store.ts - ＆gt;

export class Workout {
    name: string;
    timestamp: Date;
    lifts: Lift[];
}

class Lift {
    name: string;
    sets: Set[];
}

class Set {
    reps: number;
    weight: number;
    weightType: string
}

export class WorkoutStore {
    workout: Workout;
    weightTypes = [
        "Pounds"
    ]
    liftTypes = [
        "Dumbbell Shoulder Press",
        "Dumbbell Bench Press",
        "Curls",
        "Push Ups",
        "Pull Ups",
        "Squats",
        "Deadlifts"
    ]

constructor() {
    this.workout = {
        name: "New Workout",
        timestamp: new Date(),
        lifts: [{
            name: this.liftTypes[0],
            sets: [{
                reps: 0,
                weight: 0,
                weightType: this.weightTypes[0]
            }]
        }]
    }
}

plusSet(key) {
    this.workout.lifts[key].sets.push({
        reps: 0,
        weight: 0,
        weightType: this.weightTypes[0]
    });
}

minusSet(key) {
    this.workout.lifts[key].sets.pop()
}

plusLift() {
    this.workout.lifts.push({
        name: this.liftTypes[0],
        sets: [{
            reps: 0,
            weight: 0,
            weightType: this.weightTypes[0]
        }]
    })
}

minusLift() {
    this.workout.lifts.pop()
}

reset() {
    this.workout = {
        name: "New Workout",
        timestamp: new Date(),
        lifts: [{
            name: this.liftTypes[0],
            sets: [{
                reps: 0,
                weight: 0,
                weightType: this.weightTypes[0]
            }]
        }]
    }
}
}

我使用此模型作为表格的基础，可用于动态设置锻炼（每个锻炼都有一对多的升降机，每个升降机都有一对多的设置）。

add-lift.component.ts - ＆gt;

import { Component, OnInit } from '@angular/core';
import { HorizonService } from '../../shared/horizon.service';
import { WorkoutStore } from '../../shared/lift.store';

@Component({
  selector: 'app-add-lift',
  templateUrl: 'add-lift.component.html',
  styleUrls: ['add-lift.component.css']
})
export class AddLiftComponent implements OnInit {
  title = "Add Lift"

  addLift() {
    this.horizonService.horizon('workouts').store(this.store.workout);
    this.reset();
  }

  plusSet(key) {
    this.store.plusSet(key)
  }

  minusSet(key) {
    this.store.minusSet(key)
  }

  plusLift() {
    this.store.plusLift()
  }

  minusLift() {
   this.store.minusLift()
  }

  reset() {
    this.store.reset()
  }

  constructor(private horizonService: HorizonService, private store: WorkoutStore) { }

  ngOnInit() {

  }

}

add-lift.component.html - ＆gt;

<div class="panel panel-default">
    <div class="panel-heading">
        <h2>{{title}}</h2>
    </div>
    <div class="panel-body">
        <form>
            <div class="form-group">
                <input type="text" class="form-control" required [(ngModel)]="store.workout.name" name="name">
            </div>
            <div class="well well-sm col-md-12" *ngFor='let lift of store.workout.lifts; let liftIndex=index'>
                <div class="form-group">
                    <div>
                        <select class="form-control" id="liftType" name="liftType" required [(ngModel)]=lift.name>
                        <option *ngFor="let liftType of store.liftTypes" [value]="liftType">{{liftType}}</option></select>
                    </div>
                </div>
                <div class="well well-sm col-md-12" *ngFor='let set of lift.sets; let i=index'>
                    <h5>Set</h5>
                    <div class="form-group">
                        <label for="name" class="col-xs-4">Reps</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="reps" required [(ngModel)]="set.reps" name="reps">
                        </div>
                        <label class="col-xs-4" for="name">Weight</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="weight" required [(ngModel)]="set.weight" name="weight">
                        </div>
                        <label class="col-xs-4" for="weightTypes">Type</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="weightTypes" name="weightType" [(ngModel)]=set.weightType required>
                        <option *ngFor="let weightType of store.weightTypes" [value]="weightType">{{weightType}}</option></select>
                        </div>
                    </div>

                </div>
                <button (click)="plusSet(liftIndex)">+</button>
                <button (click)="minusSet(liftIndex)">-</button>
            </div>
            <button (click)="plusLift()">+</button>
            <button (click)="minusLift()">-</button>
            <br>
            <br>
            <button (click)="addLift()" class="btn btn-success">Save Lift!</button>
            <button (click)="reset()" class="btn btn-default">Reset</button>
        </form>
    </div>
</div>