[英]Angular ngIf can't access parent property
I'm using Angular 5 and Material 5: 我正在使用Angular 5和Material 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>
I'm trying to show contacts, but only if tab is active. 我正在尝试显示联系人,但仅在选项卡处于活动状态时才显示。 There is
isActive
property for mat-tab
( https://github.com/angular/material2/blob/5.2.x/src/lib/tabs/tab.ts#L83 ), but I can't access it, it looks undefined. mat-tab
有一个isActive
属性( https://github.com/angular/material2/blob/5.2.x/src/lib/tabs/tab.ts#L83 ),但我无法访问它,它看起来未定义。
I can't understand what am I doing wrong. 我不明白我在做什么错。
(I also can't use newer version of Angular at the moment). (目前我也不能使用较新版本的Angular)。
This way it works: 这样工作:
<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>
Elements can't access the property of any element without a reference to it ( Docs: Components Interactions ) the div
isn't treated as a part of mat-tab
unless it's a part of it's template, even if it's inside it. 如果没有对元素的引用( Docs:Components Interactions ),元素就无法访问任何元素的属性,除非
div
是模板的一部分,即使它在模板内部,也不会被视为mat-tab
的一部分。
I do not think you need the *ngIf
. 我认为您不需要
*ngIf
。 If you inspect the tab body you should not see content in the inactive tabs. 如果检查选项卡正文,则应该在非活动选项卡中看不到内容。
For example, from this simple StackBlitz , there are two tabs and the second <mat-tab-body>
has nothing inside. 例如,从这个简单的StackBlitz中 ,有两个选项卡,第二个
<mat-tab-body>
里面什么也没有。
Then, click the other tab and the reverse happens. 然后,单击另一个选项卡,相反的情况发生。
Source 资源
<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 inspection, tab 1 is active 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.