Question

我有以下组件，它有两个输入字段和一个提交。提交后，数据将发送到服务器，页面将重定向到任务页面。

但是此页面中的数据未更新，因为任务页面必须从数据库获取数据。

如果我刷新页面，或导航并返回...更新的数据是可见的。

@Component({
    selector: 'edit-tasks',
    template: `<div mdl class="mdl-grid demo-content">

          <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
                <h3>EDIT Task Page</h3>   

                <form action="#" (ngSubmit)="onSubmit()">
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="taskname" [(ngModel)]="data.taskname"/>
                    <label class="mdl-textfield__label" for="taskname">Task Name</label>

                   </div> <br/>
                  <div class="mdl-textfield mdl-js-textfield">
                    <textarea class="mdl-textfield__input" type="text" rows= "5" id="taskdesc" [(ngModel)]="data.taskdesc"></textarea>
                    <label class="mdl-textfield__label" for="taskdesc">Task Description</label>
                  </div> <br/>

                <br/>  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">SAVE</button>
                </form>

         </div>

    `,
    directives: [ROUTER_DIRECTIVES, MDL]

})

export class EditTaskComponent {

    data: any;

    constructor(private apartmentService: ApartmentService,private router: Router, private sharedService: SharedService) {
      this.data=this.sharedService.temp;
      console.log(JSON.stringify(this.data));
    }

    onSubmit(form) {    
    this.apartmentService.updateTask(this.data);
    this.router.navigate(['Tasks']);    
    }
}

根据@GünterZöchbauer的建议更新

    onSubmit(form) {    
    this.apartmentService.updateTask(this.data).then(_=>this.router.navigate(['Tasks']));   <-- changed this as per @Günter Zöchbauer suggestion and it works :)
    this.router.navigate(['Tasks']);    
    }

在service.ts

updateTask(data:any){

    return new Promise((resolve,reject)=> {
      this.http.put(`./api/newtask/${data._id}`,
      JSON.stringify(data),{ headers: new Headers({'Content-Type':'application/json'})
    })
    .map((res: Response) => res.json()).subscribe(data => {resolve(data)}, error => reject(error))
  });   
}

我如何通过观察来处理这个问题？我可以完全避免承诺吗？

Angular2 - 提交后重定向不显示更新的数据

0 个答案: