我在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);
}
}
预先感谢大家对我的帮助