代码之家 › 专栏 › 技术社区 › Roman Pushkin

Angular ngIf无法访问父属性

angular-material2 angular5 angular

Roman Pushkin · 技术社区 · 8 年前

我用的是角度5和材料5:

<mat-tab-group>
    <mat-tab label="INFO">
        info goes here
    </mat-tab>
    <mat-tab label="CONTACTS">
        <div *ngIf="isActive">
            contacts should load here
        </div>
    </mat-tab>
</mat-tab-group>

我正在尝试显示联系人,但仅当选项卡处于活动状态时。有 isActive 的属性 mat-tab ( https://github.com/angular/material2/blob/5.2.x/src/lib/tabs/tab.ts#L83 ),但我无法访问它,它看起来未定义。

我不明白我做错了什么。

(我现在也不能使用Angular的更新版本)。

2 回复 | 直到 8 年前

Hiram K. Hackenbacker 8 年前

我认为你不需要 *ngIf . 如果检查选项卡主体,则不应在非活动选项卡中看到内容。

例如,从这个简单的 StackBlitz ,有两个选项卡和第二个选项卡 <mat-tab-body> 里面什么都没有。

然后,单击另一个选项卡,就会发生相反的情况。

来源

<mat-tab-group>
  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...One</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...Two</p>
  </mat-tab>
</mat-tab-group>

DOM检查,选项卡1处于活动状态

<div class="mat-tab-body-wrapper">
  <!--bindings={
    "ng-reflect-ng-for-of": "[object Object],[object Object"
    }-->

  <mat-tab-body class="mat-tab-body ng-tns-c5-0 mat-tab-body-active ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="0" id="mat-tab-content-0-0" aria-labelledby="mat-tab-label-0-0" ng-reflect-origin="0">
    <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: none;">
      <!---->
      <h1 class="ng-star-inserted" style="">Some tab content</h1>
      <p class="ng-star-inserted" style="">...One</p>
      <!---->
    </div>
  </mat-tab-body>

  <mat-tab-body class="mat-tab-body ng-tns-c5-1 ng-star-inserted" role="tabpanel" ng-reflect-_content="[object Object]" ng-reflect-position="1" id="mat-tab-content-0-1" aria-labelledby="mat-tab-label-0-1">
    <div class="mat-tab-body-content ng-trigger ng-trigger-translateTab" style="transform: translate3d(100%, 0px, 0px);">
      <!---->
    </div>
  </mat-tab-body>

</div>

k0hamed 8 年前

这样工作:

<mat-tab-group>
    <mat-tab label="INFO">
        info goes here
    </mat-tab>
    <mat-tab #contactsTab label="CONTACTS">
        <div *ngIf="contactsTab.isActive">
            contacts should load here
        </div>
    </mat-tab>
</mat-tab-group>

元素在没有引用的情况下不能访问任何元素的属性( Docs: Components Interactions 这个 div 不被视为 mat-tab 除非它是模板的一部分,即使它在里面。