3

我正在使用(selectedChange)="functionName($event)"来获取我的活动标签的索引。但是，在页面加载时，我无法触发此事件，因为它仅在我更改选项卡至少一次以获取MatTabChangeEvent包含两个对象tab和index.

在两个选项卡中，我都有一个带分页的垫表。还有一个搜索栏，可以从数据库中搜索数据并将其显示在各自的选项卡中，但对我来说，问题是如果在页面加载时用户直接进入搜索栏，那么我将不知道哪个选项卡当前处于活动状态，所以我的条件语句是根据用户搜索在各自的选项卡中显示数据将给出不存在Uncaught error的值。this.activeTab.index但是一旦用户实际更改了选项卡，那么我就有了活动选项卡索引值，并且我的代码可以正常工作。

那么我怎样才能在页面加载时获得 MatTabChangeObject 呢？

注意：我不能使用MatGroupwithViewChild因为它不会MatTabChangeEvent像对象一样返回我

这是我的代码

 if(this.tabEvent.index === 0) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, true).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }
    else if(this.tabEvent.index === 1) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, false).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }

我在函数中发出 eventChange 值，然后将该值分配给this.tabEvent类型为MatTabChangeEvent

4

1 回答 1

1

这就是我在项目中实现 Mat Tab 的方式

在 HTML 中：

(selectedChange)="selectedTabChange($event)"

TS：

index = 0;

ngOnInit(): void {
  ...
  this.onTabChanged();
}

selectedTabChange(event) {
  this.index = this.event.index
  this.onTabChanged()
}

onTabChanged() {
  if (this.index==0) {
    ...
  } else if (this.index==1) {
    ...
  }
  ...
}

我什至在某些页面中有按路线导航的选项卡...

在那里，我的TS略有变化

constructor(ar: ActivatedRoute) { }

ngOnInit(): void {
  this.ar.queryParams.subscribe(param => {
    if (param.tab) this.index = Number(param.tab); else this.index = 0;
    this.onTabChange()
  })
  ...
}

希望能帮助到你！

于 2020-05-12T21:29:19.280 回答