2

我有以下代码:

<md-tab-group (selectChange)="doSomething()">
  <md-tab *ngFor="let p of something))">
    <template md-tab-label>
     {{p.name}} ...
    </template>
   </md-tab>
 </md-tab-group>

现在 doSomething() get 在 Tab-Change 上被触发,我可以访问选定的索引,但是有没有办法访问我的 *ngFor 循环的值?我需要在我的代码中使用“p.id”来从我的数据库中获取数据,具体取决于打开的选项卡。还是有一个我没有想到的更优雅的解决方案?谢谢你的帮助 :)

4

2 回答 2

2

我通过将 $event 发送到函数来解决它

<md-tab-group #tabs (selectChange)="myFunction($event)">
    <md-tab label="My label" data-my-value="123">
        ...
    </md-tab>
    ...
</md-tab-group>

然后从该对象中获取值

myFunction($event: any) {
    let myValue = $event.tab.content.viewContainerRef.element.nativeElement.getAttribute('data-my-value');
}
于 2017-05-12T14:38:26.950 回答
1

对于任何感兴趣的人,我以这种方式解决了我的问题:

  1. 将数据属性添加到 *ngFor 生成的选项卡并将整个选项卡组传递给我的函数:
<md-tab-group #tabgroup (selectChange)="doSomething(tabgroup)">
          <md-tab *ngFor="let p of something" [attr.data-pid]="p.id">
            <template md-tab-label>
             {{p.name}} ...
            </template>
           </md-tab>
         </md-tab-group>
  1. 获取我选择的 md-tab 和我的 nativeElement,并从中获取我的数据属性。不是很好&干净,但它的工作原理。
doSomething(tabgroup: MdTabGroup) {

        let pid = tabgroup._tabs.find((e, i, a) => i == tabgroup.selectedIndex)
            .content.viewContainerRef.element.nativeElement.dataset.pid;

        console.log(pid);
    }
于 2016-12-17T14:31:06.993 回答