Как обновить UI сразу в Angular

Question

У меня есть диалоговое окно, в котором пользователь может копировать диаграммы на другую карточку рабочей области, но когда когда-либо пользователь щелкает по выбранной карточке рабочей области, чтобы скопировать конкретную диаграмму, счетчик диаграмм не обновляется сразу на выбранной карточке рабочей области.

Диаграмма копируется, но количество диаграмм на карточке рабочей области не обновляется.

Я вижу изменение количества диаграмм только тогда, когда закрываю диалоговое окно копирования и открываю его снова.

Буду очень признателен, если я смогу получить какое-либо предложение или помощь о том, как я могу немедленно обновить счетчик диаграмм на выбранной карточке рабочей области, не закрывая сначала диалоговое окно.

Карточка рабочей области. HTML

<div>
<span class="details ws-name" matLine>{{chartCount}} Chart{{chartCount !== 1 ? 's' : ''}}</span>
</div>

Карточка рабочего пространства. TS

chartCount: number = 0;

ngOnInit(): void {
 if(!this.workspace.chartCount && this.workspace.charts) {
      this.chartCount = this.workspace.charts.length;
 }
  else {
      this.chartCount = this.workspace.chartCount;
 }
}

Выбор списка рабочего пространства. HTML

<div class="header">Copy Chart to a Workspace</div>
  <mat-hint class="sub-header">Select one of the following workspaces. The chart will be automatically staged.</mat-hint>
<mat-progress-bar *ngIf="loading || copying" color="primary" mode="indeterminate"></mat-progress-bar>
<div class="list" *ngIf="!loading">

 <mc-workspace-card *ngFor="let workspace of workspaces" [workspace]="workspace" [isCopyModal] = "true" (click)="copy(workspace)">
</mc-workspace-card>

</div>

Выбор списка рабочего пространства. TS

  copy(workspace: Workspace) {
    this.copying = true;
    this.chartService.copyChartToWorkspace(this.chartGuid, workspace.guid).subscribe(newChart => {
      this.copying = false;
      this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!', { duration: 5000,  panelClass: "snackbar-button" }).onAction().subscribe(() => {
        this.dialogRef.close();
        this.router.navigate(['workspace', workspace.guid], { state: { data: workspace.guid } });
      })
    })
  }

введите описание изображения здесь

Answer 1

Похоже, ваша функция для обновления номера диаграммы в рабочей области записана в ngOnInit () , и помните, что все, что находится в ней, будет вызываться один раз при загрузке компонента. Что вы можете сделать, так это написать свои коды в функции из ngOnInt , которую вы будете вызывать в ngOnInit (). Это поможет вам вызвать его снова после копирования диаграммы, чтобы обновить ваше рабочее пространство.

updateChartNumber(){
if(!this.workspace.chartCount && this.workspace.charts) {
      this.chartCount = this.workspace.charts.length;
 }
  else {
      this.chartCount = this.workspace.chartCount;
 }
}

Затем вызовите эту функцию в OnInit ()

OnInit(){
 this.updateChartNumber()
}

После копирования в рабочую область вызовите функцию еще раз, чтобы обновить номер диаграмм рабочей области

 copy(workspace: Workspace) {
    this.copying = true;
    this.chartService.copyChartToWorkspace(this.chartGuid, workspace.guid).subscribe(newChart => {
      this.copying = false;
      this._snackBar.open(`Chart has been copied to ${workspace.name}`, 'Check it out!', { duration: 5000,  panelClass: "snackbar-button" }).onAction().subscribe(() => {
        this.dialogRef.close();
        this.router.navigate(['workspace', workspace.guid], { state: { data: workspace.guid } });
      })
    })
    this.updateChartNumber()
  }

Вот чем я могу вам помочь, дайте мне знать, если у вас есть вопросы

Способ 2 : Вы также можете позвонить ngOnInit () всякий раз, когда вызывается функция copy () .

Answer 2

Я думаю, почему он не обновляется сразу, потому что вы не используете двустороннюю привязку . Если я прав, вы хотите обновить количество диаграмм в карточке рабочей области, а затем просто используйте:

<mc-workspace-card *ngFor="let workspace of workspaces;let index = index;" [(ngModel)]="workspaces[index]" [isCopyModal] = "true" (click)="copy(workspace)">

Обратите внимание на использование [(ngModel)] здесь для его реализации.

Answer 3

Из того, что я вижу, вы обновляете только chartCount в ngOnInit, что происходит ровно один раз (когда вы загружаете компонент).

Вам нужно будет обновить это свойство charCount в WorkspaceCard.ts или, что проще, напишите функцию для логирования c и используйте ее.

WorkspaceCard.ts

getChartCount(): number {
  return (!this.workspace.chartCount && this.workspace.charts) ? this.workspace.charts.length : this.workspace.chartCount;
}

WorkspaceCard. html

<div>
  <span class="details ws-name" matLine>{{getChartCount()}} Chart{{getChartCount()!== 1 ? 's' : ''}}</span>
</div>

Answer 4

Может быть, вы можете использовать asyn c pipe, например:

<p>{{ name | async}}</p>

Имя может быть любым!