如何使用Angular2更新Modal中的数据?

时间:2016-10-20 11:07:35

标签: html angular bootstrap-modal

这是My Angular2 part.Here Updateuser函数用于数据库中的更新数据

export class UserprofileComponent 
    {
          getdata : string;     
          public data;     
           Username : any ;   
           Firstname :any;             
    updateuser(){
         let re = /[?&]([^=#&]+)=([^&#]*)/g;
         let match;
         let isMatch = true;
         let matches = {};
             while (isMatch) 
             {
                   match = re.exec(window.location.href);
                      if (match !== null)
                      {
                          matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
                              if (match.index === re.lastIndex)
                               {
                                    re.lastIndex++;
                               }
                        }
                        else {
                                   isMatch = false;
                             }
                  }
             console.log(matches);
             var headers= new Headers({'Content-Type' : 'application/x-www-form-urlencoded '}); 

        var body = JSON.stringify({     
           username1 : this.user.Username,
           firstname1 : this.user.Firstname,               
     })            
      this.http.post('../widgets/Update.php?ID='+matches['ID'],body, {
      headers:headers; })
       .map(res => res.json())
       .map(res => {
             if(res.success)
             {
                this.m=res.Message;
             }
             else{
                 this.m="wrong";
             }
        })
          .subscribe(
            data =>this.getdata = JSON.stringify(data),
            err => console.error(err),
            () => console.log('done'));
        }
    }

这是我的HTML部分:

 <ngl-modal header=" Edit Profile" [(open)]="opened" [size]="size">
       <div body>           
    <div class="form-horizontal" style="margin:auto;" id="editForm" *ngFor="#user of getdata">
        <div class="form-group">
            <label class="col-md-3 control-label">Username:</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="cname" [(ngModel)]="user.Username" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-3 control-label">Firstname:</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="ads" [(ngModel)]="user.Firstname"/>
            </div>    
       </div>
        <span>{{m}}</span>
      <button class="slds-button slds-button--neutral" (click)="cancel()">Cancel</button>
      <button class="slds-button slds-button--neutral slds-button--brand" (click)="updateuser()">Save</button>
    </ngl-modal>

这里我使用modal显示由ngFor显示的数据。但是我想更新这个显示数据以便怎么做?因为数据是由ngModel显示的,当我拿整个{{1例如,如果ngModel那么它显示用户未定义的错误,那么在这种情况下该做什么?

1 个答案:

答案 0 :(得分:0)

我的第一个猜测是尝试let user of getdata而不是#user of getdata

我的第二个猜测是创建一个用户数组getdata: Array<any>作为您的类的属性,而不是getdata:string,然后分配给它。

我的第三个猜测:在获取数据之前,没有用户,所以:     <div *ngIf='getdata' class="form-horizontal" style="margin:auto;" id="editForm" *ngFor="#user of getdata">以确保您没有尝试在该对象之前访问该对象。

在您致电updateUser()之前,没有任何对象可以显示,这就是为什么用户未定义的原因,就我所见。

希望其中一些有益,祝你好运。