编辑并保存角度更新整个实体列表而不是一个Angular

时间:2018-04-11 14:03:03

标签: angular

我有像这样的引导程序

  <ul class="navbar-nav">
          <li class="nav-item">
            <a type="submit" form="editFormTruck"
              (click)="processForm()"
               class="btn btn-light"
               title="Save Truck"
               data-toggle="tooltip"
               data-placement="bottom">
              <i class="fa fa-save"></i> <span class="d-none d-sm-inline">Save</span>
            </a></li>
        </ul>
      </nav>
    </header>
    <section id="truck">
      <div class="container-fluid">
        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
    <!--works no forms yet-->
                <form   (ngSubmit)="processForm()"  id="editFormTruck">

                  <div class="form-group">
                    <label class="form-control-label"  ngFor="truckCode">Truck code</label>
                    <input type="text" name="truckCode"  class="form-control" [(ngModel)]="truck.truckCode">
                  </div>

                  <div class="form-group">
                    <label class="form-control-label" ngFor="purchasedDate">purchased Date</label>
                    <input type="text" name="purchaseDate" class="form-control" [(ngModel)]="truck.purchasedDate">
                  </div>

                  <div class="form-group">
                    <label class="form-control-label" ngFor="truck.description">Description</label>
                    <input type="text" name="description" class="form-control" [(ngModel)]="truck.description">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

上面的表格属于编辑组件,当我从另一个组件点击编辑我有一个列表我来到这个组件,输入空间内的数据是正确的但是在编辑后保存在我的列表中的所有值变为相同我编辑过的价值,也就是说我在编辑一辆卡车后得到了这个值

TruckCode   purchasedDate   descriptions    
1   BTY200  2006-05-05  New WOrkdl   Edit  Delete
2   BTY200  2006-05-05  New WOrkdl   Edit  Delete
3   BTY200  2006-05-05  New WOrkdl

这是我的编辑组件类

export class EditTruckComponent implements OnInit {

  private truck: Truck;

  public truckForm: FormGroup;

  constructor(private truckService: TruckService,
              private router: Router) {
  }

  ngOnInit() {
    this.truck = this.truckService.getter();
  }

  processForm() {
    if (this.truck.truckId  == undefined) {
      this.truckService.createTruck(this.truck)
        .subscribe((truck) => {
          console.log(truck)
          this.router.navigate([''])
        },(error) => {
          console.log(error);
        });
    } else {
      this.truckService.updateTrucks(this.truck)
        .subscribe(
          (truck) => {
            console.log(truck);
            this.router.navigate([''])
          }, (error) => {
            console.log(error);
          });
    }

  }

这是卡车组件的更新和创建卡车方法

 updateTruck(truck) {
    this.truckService.setter(truck)
    this.router.navigate(['/edits'])
  }

  //this gets us edit page with blank forms.
  newTruck() {
    let truck = new Truck(null, null, new Date(), "")
    this.truckService.setter(truck)
    this.router.navigate(['/edits'])
   }

0 个答案:

没有答案