Question

我有以下代码：

<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（）得到了Tab-Change，我可以访问所选的索引，但有没有办法访问我的* ngFor循环的值？我需要在我的代码中使用'p.id'来从我的数据库中获取数据，具体取决于打开的选项卡。或者，我没有想到更优雅的解决方案？感谢您的帮助:)）

Answer 1

对于任何有兴趣的人，我都这样解决了我的问题：

将数据属性添加到* ngFor生成的选项卡中，并将整个tabgroup传递给我的函数：

<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>

获取我选择的md-tab，使用我的nativeElement，然后从中获取我的数据属性。不好看＆amp;干净，但它确实有效。

doSomething(tabgroup: MdTabGroup) {

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

        console.log(pid);
    }

Answer 2

我通过将$ event发送到函数

来解决它

<!-- language: lang-js -->
function showAnnReviewByPlan(e)
{
    // Set text to 'Hide AR's'
    var buttonText = $(e.currentTarget).closest("tr").find(".k-grid-ViewARs").html(); // $(e.currentTarget).closest("tr").... gets specific row & element containing button text, in this case <a role="button" class="k-button k-button-icontext k-grid-ViewARs"

    if (buttonText.indexOf("Hide ARs") !== -1)
    {
        $(e.currentTarget).closest("tr").find(".k-grid-ViewARs").html("<span class=' '></span>View ARs"); // toggles/sets specific row button text

        // Hide #AnnReviewsByPlan <div>
        $("#AnnReviewsByPlan").hide();
    }
    else
    {
        $(e.currentTarget).closest("tr").find(".k-grid-ViewARs").html("<span class=' '></span>Hide ARs"); // toggles/sets specific row button text

        // Make sure #AnnReviewsByPlan <div> is visible
        $("#AnnReviewsByPlan").show();

        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

        var id = dataItem.id;

        $.ajax({
            type: "GET",
            url: '/ManageCompanies/AnnualReviewsByPlan',
            data: { id: id },
            success: function (data, textStatus, jqXHR) {
                $('#AnnReviewsByPlan').html(data);
            }
        });
    }

然后从该对象获取值

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

angular2材料访问选项卡值

2 个答案: