Question

我有一个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);     
    }
}

Answer 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);
   });
}

Answer 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
}

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

2 个答案: