Question

我有一个模态页面和一个普通页面。我正在通过服务将值从模式发送到页面。此值“到达”页面后，我想从一个选项卡更改为另一个选项卡，即使该值正确到达，选项卡也不会更改。我想要的行为只有在移动鼠标时才会发生，这是我无法解释的。我也搜索了类似的问题，但是似乎没有一个问题完全解决了我。

Modal.component.ts

private onConfirmIndication() {
  this.returnsService.onConfirmRemoveProduct(this.data);
  this.onCloseDialog();
}

private onCloseDialog() {
  this.dialogRef.close();
}

Page.component.ts

 private removeProductSubscription: Subscription
 private selectedTab: number = 0;
 private displayTab: boolean = false;

ngOnInit() {
    this.removeProductSubscription = this.returnsService.currentRemoveProduct.subscribe(refundData => this.func(refundData));
  }

func(el) {
  this.openIndicationSuccessDialog();
  this.selectedTab = 1; 
  this.displayTab = true;
}

Page.component.html

<div class="row">
  <div class="col-12">
    <mat-tab-group [(selectedIndex)]="selectedTab">
      <mat-tab label="Tab1">

        ---- code here ---

      </mat-tab>
      <mat-tab label="Tab2" *ngIf="displayTab">

        ---- code here ---

      </mat-tab>
    </mat-tab-group>
  </div>
</div>

MyService.service.ts

@Injectable()
export class MyService {
  private removeProductSource = new BehaviorSubject('');
  currentRemoveProduct = this.removeProductSource.asObservable();

  constructor() { }

  onConfirmRemoveProduct(el: any){
    this.removeProductSource.next(el);
  }
}

在按下模态按钮并调用onConfirmIndication()函数之后，我需要显示该选项卡并将其作为选定的选项卡。我已经调试并检查是否可以成功到达页面组件上的func()函数，但是该选项卡将不会出现或不会被选中。

编辑：

如果我将func()函数更新为此，我就能实现我想要的：

constructor(private ref: ChangeDetectorRef) { }

func(el) {
  this.openIndicationSuccessDialog();
  this.selectedTab = 1;
  this.displayTab = true;
  this.ref.detectChanges();
}

我只是不明白为什么会这样？为什么没有检测到任何变化？

订阅服务后，为什么我的视图没有更新？

0 个答案: