在 Angular 2 中按表单编辑值

Question

我的模态表单中的更新值有问题。我想在单击保存时更新输入值，但是当我写一些东西时它的更新结束关闭 window。这是我的代码：

模态-edit.html:

<div class="container">
  <div class="modal fade" id="editForm" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content"> 
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edycja remontu</h4>
        </div>
        <div class="modal-body">

          <form   class="form-horizontal">
            <fieldset>

              <div class="form-group">
                <label class="col-md-2 control-label">Nazwa</label>
                <div class="col-md-8">
                <input class="form-control"
                         id="name" 
                         type="text" 
                         placeholder="Nazwa" 
                         required 
                         minlength="3" 
                         [(ngModel)] = "selectedItem.name"
                         name="name" />

                  </div>
                </div>

              <div class="form-group">
              <label class="col-md-2 control-label">Kod</label>
                <div class="col-md-8">
                  <input class="form-control"  
                         required 
                         type="text" 
                         placeholder="Kod pocztowy"
                         name="zip-code" 
                         [(ngModel)] = "selectedItem.zipCode"
                         >
                </div>
              </div>
            </fieldset>
            <input type="submit"  class="btn btn-default"
                    data-dismiss="modal" value="Save" 
                    (click)="editRenovation()"
                    >
            <button class="btn btn-default" data-dismiss="modal">Anuluj</button>
          </form>

        </div>
        <div type="submit" class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

装修-list.component.html:

<h1>{{title}}</h1>

<button class="btn btn-primary" data-toggle="modal" data-target="#addForm"
(click)="selectedItem = renovation" >Dodaj</button>

<table class="table table-striped" [mfData]="renovations" #mf="mfDataTable" [mfRowsOnPage]="5">
    <thead>
    <tr>
        <th style="width: 20%">
            <mfDefaultSorter by="id">Id</mfDefaultSorter>
        </th>
        <th style="width: 50%">
            <mfDefaultSorter by="name">Nazwa</mfDefaultSorter>
        </th>
        <th style="width: 10%">
            <mfDefaultSorter by="zipCode">Kod pocztowy</mfDefaultSorter>
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let renovation of mf.data">
        <td>{{renovation.id}}</td>
        <td>
          <a [routerLink]="['/renovations', renovation.id]">
          {{renovation.name}}
          </a>
        </td>
        <td class="text-right">{{renovation.zipCode}}</td>
         <td>
            <button class="btn btn-info" data-toggle="modal" data-target="#editForm" (click)="selectedItem = renovation">Edytuj</button>
            <button button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal"
            (click)="selectedItem = renovation" >Usuń</button>
          </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">
            <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
        </td>
    </tr>
    </tfoot>
</table> 

<app-modal-delete [selectedItem] = selectedItem
                  [renovations] = renovations
                  (removeItem) = "onDeleteRenovation($event)">
</app-modal-delete>

（导入部分来自）装修-list.component.ts：

resetEdit(): void {
    this._renovationService.deleteRenovation(this.selectedItem.id)
      .subscribe(()=> this.renovations = this.renovations.filter( item => this.selectedItem !== item) )
  }



  editRenovation(): void {
    var editCopy = Object.assign({}, this.selectedItem);

    this._renovationService.editRenovation(editCopy)
    .subscribe(() => this.renovations.push(editCopy));
    this.resetEdit();
}

模态-edit.component.ts:

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {IRenovationList} from '../renovation-list/renovation-list';
import {Renovation} from '../renovation-list/renovation';
import {RenovationListView} from '../renovation-list/renovation-list-view.component';
import {RenovationService} from '../service/renovation.service'; 



@Component({
  selector: 'app-modal-edit',
  templateUrl: './modal-edit.component.html',
  styleUrls: ['./modal-edit.component.css']
})
export class ModalEditComponent implements OnInit {



    @Input() selectedItem: any;
    @Input() renovations: IRenovationList[] = [];
    @Input() newItem: Renovation = new Renovation();
    @Output() editItem: EventEmitter<any> = new EventEmitter<any>();

  constructor() { }

  editRenovation(): void {
    this.editItem.emit();
  }



  ngOnInit() {
  }

}

（仅导入部分）renovation.service.ts：

editRenovation(renovation: IRenovationList): Observable<IRenovationList> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        const url = `${this._renovationUrl}/${renovation.id}`;
        console.log();



        return this.http.put(url, renovation, options)
               .map(() => renovation)
               .do(data => console.log('edit remont: ' + JSON.stringify(data)))
               .catch(this.handleError);

    }

有人知道问题出在哪里吗？

Answer 1

首先定义临时变量：

  itemName : string;
  itemId : string;
  itemDescription: string;

这是模态示例：

        <!--Modal: exampleModal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">

              <!--Content-->
              <div class="modal-content">

                  <!--Header-->
                  <div class="modal-header">
                      <h4 class="modal-title h5 w-100" id="myModalLabel">example item {{name}}</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>

                  <!--Body-->
                  <div class="modal-body mb-0 px-4">

                      <!--Name-->
                      <div class="md-form">
                          <input (input)="itemName = $event.target.value" [value]="itemName" type="text" id="itemName" class="form-control">
                          <label for="itemName" class="">Item name</label>
                      </div>

                      <div class="md-form">
                          <input (input)="itemId = $event.target.value" [value]="itemId " type="text" id="itemId" class="form-control">
                          <label for="itemId ">item ID</label>
                      </div>

                      <div class="md-form">
                          <input (input)="itemDescription= $event.target.value"
 [value]="itemDescription" type="text" id="itemDescription" class="form-control">
               <label for="itemDescription">Item description</label>
                      </div>


                  </div>

                  <!--Footer-->
                  <div class="modal-footer justify-content-center">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                      <button (click)="saveChangesModal()" type="button" class="btn btn-dark-green">Save</button>
                  </div>

              </div>
              <!--/.Content-->

          </div>
        </div>

下面是更新这些的示例：

  saveChangesModal() {
      this.yourVarToUpdateOne.name = this.itemName,
      this.yourVarToUpdateTwo.id = this.itemId,
      this.yourVarToUpdateTwo.description : this.itemDescription

      //some your functions

  }

用这个你可以更新你想要多少个变量。

这是你要找的吗？

在 Angular 2 中按表单编辑值

Edit value by form in Angular 2

html

typescript

angular2-forms

angular2-template