从子更改更新父视图(progressSpinner)

时间:2019-11-12 13:26:37

标签: angular primeng

我在Angular中使用Input Output绑定,其中在我的父组件中,我有一个必须通过一些后端(BPM)执行的任务列表,而在子视图中,我具有要执行的按钮。当我点击执行时,输出应该更新我加载了PrimeNg progressSpinner的父视图。 我的问题是,即使我的布尔条件正确解决,加载程序也不会消失。我该如何处理?

ParentComponent HTML

<p>
  loading: {{ loading }}
</p>

<div class="row" *ngIf="!loading">
  <p-progressSpinner></p-progressSpinner>
</div>

<div class="row" *ngIf="loading">
  <div class="col" [ngClass]="{ 'col-4': idKey }">
    <div class="card">

      <!-- <span #spy>{{ t | json }}</span> -->
      <div class="card-header">
        <h4 class="card-title">{{ 'ui.lc.tsk.actions' | translate }} ({{ tasks.length }})</h4>
      </div>
      <div class="card-body">
        <!-- buttons actions -->
        <div *ngFor="let t of tasks">
          <button type="button" class="btn btn-secondary vspace-xs" (click)="addKey($event, t)"
                  title="{{ 'ui.lc.list.title' | translate }}">{{ t.taskName }}</button>
        </div>
      </div>
    </div>
  </div>

  <!-- inject template of formKey -->
  <div class="col" *ngIf="idKey">
    <!-- child --> <spt-task-detail [selectedTask]="idKey" [(loading)]="loading"></spt-task-detail>
  </div>
</div>

ParentComponent TS

export class LegalcaseTasksComponent implements OnInit, OnDestroy {

  @Input() businessKey: string;

  idKey: Task;
  tasks: Task[] = [];

  loading = true;

  constructor(private taskService: TaskService) {
  }

  ngOnInit() {
    this.init();
  }

  ngOnDestroy(): void {
    this.reset();
  }

  init() {
    this.taskService.findByBusinessKey(this.businessKey)
    .subscribe(data => {
      this.tasks = data;
      console.log('[LegalcaseTasksComponent] OK search..');
      this.loading = true;
    }, (err) => console.log('Erreur search: ', err));
  }

  addKey(event, task: Task) {
    if (task) {
      this.idKey = task;
      console.log('TEST ici: ' + JSON.stringify(this.idKey));
    }
  }

  reset() {
    this.idKey = undefined;
    this.tasks = [];
    this.loading = true;
  }

}

ChildComponent HTML

<div class="card">
  <div class="card-header">
    <h4 class="card-title">{{selectedTask.taskName}}</h4>
  </div>

  <div class="card-body">
    <div *ngIf="attachDocuments">
      <spt-legalcase-attach-document-list [uuid]="selectedTask.businessKey"
                                          [(documentsAttached)]="documentsAttached"></spt-legalcase-attach-document-list>
    </div>
    <div *ngIf="addTypesProcedures">
      <spt-legalcase-type-procedure-list [uuid]="selectedTask.businessKey"
                                         [(types)]="typesProcedures"></spt-legalcase-type-procedure-list>
    </div>

    <div *ngIf="associateLegalCase">
      <spt-associate-legalcase [uuid]="selectedTask.businessKey"
                               [(ignoreStep)]="ignoreStep"
                               [(legalcaseParentId)]="legalcaseIdToAssociate"></spt-associate-legalcase>
    </div>

    <!-- Execute task given variables -->
    <div class="form-group row  vspace-md">
      <div class="offset-8 col-sm-4">
        <button type="button" title="{{ selectedTask.taskName }}"
                class="btn btn-success width-control"
                [disabled]="!execute" (click)="completeTask($event)">
          <span class="fas fa-bolt"></span>
          <span class="margin-left-xxs" translate="ui.btn.complete"></span>
        </button>
      </div>
    </div>
  </div>
</div>

ChildComponent TS


export class TaskDetailComponent implements OnInit {

@Output() loadingChange = new EventEmitter<boolean>();

  get loading(): boolean {
    return this._loading;
  }

  @Input()
  set loading(value: boolean) {
    this._loading = value;
    this.loadingChange.emit(value);
  }

private _loading = true;

completeTask(event) {
    if (event.preventDefault) {
      event.preventDefault();
    }

    // Complete task
    this.executeTask(event);
  }

  executeTask(event) {
    if (event.preventDefault) {
      event.preventDefault();
    }

    this.loading = false;

    this.taskService.executeTask(this.varsTask)
    .subscribe(
      taskId => this.update(taskId),
      err => {
        console.log('Fail to execute task: ' + err);
        this.loading = true;
      }
    );
  }

  private update(taskId: any) {
    console.log('TEST: task executed: ' + taskId);
    this.loading = true;
    this.loadingChange.emit(true);
  }
}

预先感谢大家对我的帮助

0 个答案:

没有答案