Angular2 - 当基础数据发生变化时如何重新加载当前组件答案

【问题标题】：Angular2 - How to reload current component when underlying data has changedAngular2 - 当基础数据发生变化时如何重新加载当前组件
【发布时间】：2016-06-03 17:29:23
【问题描述】：

我有一个 TaskComponent，它只从 Web 服务中提取 OPEN 任务并显示在模板中。此模板有一个“MARK COMPLETED”按钮，该按钮的 onSubmit() 通过 http POST 将任务的状态更改为 CLOSED。

现在任务状态已经改变，它应该不再显示在当前页面中。我不想离开此页面，但想确保不显示已完成的任务。

如果我刷新页面，已完成的任务不会按预期显示。我如何在不刷新页面的情况下实现这一点？

@Component({
    selector: '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>Tasks Page</h3>

              <div *ngFor="#task of tasks" class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
                <div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
                <h2 class="mdl-card__title-text">{{task.taskname}}</h2>
                </div>
                <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                {{task.taskdesc}}
                </div>
                <div class="mdl-card__actions mdl-card--border">                
                <a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a>


                <a *ngIf="task.taskstatus=='OPEN'" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="onClickMark(task)">MARK COMPLETED</a>               


                <a [routerLink]="['/EditTask']" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="onClick1(task)">EDIT</a>               
                </div>
             </div>          
          </div>            
    `,
    directives: [ROUTER_DIRECTIVES,MDL]

})

export class TasksComponent {

    public tasks: Object[];
    data: any;
    userEmail = JSON.parse(localStorage.getItem('profile'));
    constructor(private apartmentService: ApartmentService, private sharedService: SharedService,private router: Router) { }


    onClickMark(task){
       this.data  = task;
       this.apartmentService.markCompleted(this.data);     
    }
}

【问题讨论】：

标签： angular material-design

【解决方案1】：

我将从tasks 列表中删除标记为已完成的任务：

onClickMark(task){
   this.data  = task;
   this.apartmentService.markCompleted(this.data);     
   var index = this.tasks.findIndex((task) => this.data = task);
   this.tasks.splice(index, 1);
}

如果你的 markCompleted 是异步的，你需要返回一个 observable 或 promise 来通知调用组件。这是一个示例：

onClickMark(task){
   this.data  = task;
   this.apartmentService.markCompleted(this.data).subscribe(() => {     
     var index = this.tasks.findIndex((task) => this.data = task);
     this.tasks.splice(index, 1);
   });
}

【讨论】：

这一行的微小变化.. var index = this.tasks.findIndex((task) => this.data==task); ...非常感谢..非常感谢您的帮助。

【解决方案2】：

您的markCompleted() 方法似乎对服务器进行了异步调用。为了能够在markCompleted() 完成时链接附加代码，它需要返回Promise 或Observable。然后您可以链接更多代码，例如：

onClickMark(task){
   this.data  = task;
   this.apartmentService.markCompleted(this.data)
   .then(result => this.data = []); // with Promise
   .subscribe(result => this.data = []); // with Observable
}

【讨论】：