如何更新表数据并将其保存回Angular

时间:2019-05-22 09:54:06

标签: html angular

我是Angular的初学者,我尝试做一些练习。我从服务器获取一个包含数据的表,所有数据均正确显示。我要编辑此数据,然后将表再次保存到服务器。

-我的问题:更新后,该表仅保存了3行,其余的未保存

感谢您的帮助

我的:HTLM代码

<div class="page-header mb-3">My Data </div>
<div class="row">
  <div class="col-md-12">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a routerLink="/partner">Partner</a></li>
      </ol>
    </nav>
  </div>
</div>




<div *ngIf="partner">
<div><span>Id: </span>{{partner.id}} </div>

<div class="row full-card"> 
 <div class="col-md-12">
   <div class="card">
    <div class="card-body">

      <div class="form-row">
          <div class="form-group col-md-6">  
              <span>Firstname </span>       
              <input [(ngModel)]="partner.firstName" type = "text"  class="form-control" name= "firstName" placeholder="Firstname"/>
            </div>

        <div class="form-group col-md-6">     
            <span>Lastname </span>      
            <input [(ngModel)]="partner.lastName" type = "text"  class="form-control" name= "lastName" placeholder="Lastname"/>
          </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">  
                <span>Username </span>              
              <input [(ngModel)]="partner.username" type = "text"  class="form-control" name= "username" placeholder="Username"/>
            </div>
            <div class="form-group col-md-6">  
                <span>Password </span>      
                <input [(ngModel)]="partner.password" type = "text"  class="form-control" name= "password" placeholder="Password"/>
            </div>
            </div>


          <div class="form-row">
              <div class="form-group col-md-6">   
                  <span>Street </span>              
                  <input [(ngModel)]="partner.street" type = "text"  class="form-control" name= "street" placeholder="Street"/>
                </div>

              <div class="form-group col-md-6">   
                  <span>City</span>              
                  <input [(ngModel)]="partner.city" type = "text"  class="form-control" name= "city" placeholder="City"/>
                </div>
            </div>


            <div class="form-row">

                <div class="form-group col-md-6">   
                    <span>Zip </span>               
                    <input [(ngModel)]="partner.zip" type = "text"  class="form-control" name= "zip" placeholder="Zip"/>
                </div>

                <div class="form-group col-md-6">   
                    <span>Housenumber</span>                    
                    <input [(ngModel)]="partner.housenumber" type = "text"  class="form-control" name= "housenumber" placeholder="Housenumber"/>
                  </div>
                  </div>


              <div class="form-row">
                  <div class="form-group col-md-6">
                      <span>Email</span>  
                      <input [(ngModel)]="partner.eMail" type = "text"  class="form-control" name= "eMail" placeholder="Email"/>                   
                    </div>

                  <div class="form-group col-md-6">
                      <span>Phone</span>  
                    <input [(ngModel)]="partner.phone" type = "text"  class="form-control" name= "phone" placeholder="Phone"/>
                  </div>
                  </div>

<button (click)="save()">Save</button> <label></label>

<button (click)="deletePartnerByID(partner)">Delete</button>
</div> 
</div>
</div>
</div>
</div>

Partner.ts

save(): void {
    this.partnerService.updatePartnerByID(this.partner, this.partner.id)
    .subscribe(() => this.goBack());
  }

服务:

 updatePartnerByID(partner: Partner, id: number): Observable<Partner> {
    const url = `${this.apiUrl}Users/${id}`;
    return this.http.put<Partner>(url, partner).pipe(catchError(this.handleError));
  }

0 个答案:

没有答案