文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular6 -引用隐藏元素

问Angular6 -引用隐藏元素
EN

Stack Overflow用户

提问于 2018-06-20 19:56:51

回答 1查看 2.1K关注 0票数 1

我有一个场景，我正在使用一个嵌入在我的html模板中的组件，我希望它被隐藏，直到复选框。但是，有一个条件可以确定"showControl“是否设置为true .条件是通过在控件上调用一个方法来确定的(这里是鸡和蛋场景)。

html如下：

<input type="checkbox" (click)="clickBox()" />

<div *ngIf="showControl">
    <app-sample #appsampleref></app-sample>
</div>

.ts代码如下：

@ViewChild(appsampleref) appSampleControl: AppSampleComponent;

clickBox() {
   if (this.appSampleControl.someMethod()) { 
       this.showControl = true;
   }
}

上面的代码给出了以下错误：

错误TypeError:无法获得未定义或空引用的属性“someMethod”

我如何绕过这个场景，因为角显然不是初始化我的控制，直到它显示出来。

预先谢谢你的指点！:)

typescript

angular6

angular-template

javascript

angular

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-20 20:14:48

您需要将元素保存在dom中，只需切换它的可见性即可！不要使用*ngIf，而是使用[hidden]。*ngIf实际上将从dom中添加或删除元素，而[hidden]只会切换元素上的display属性。注意，如果*ngIf的计算结果为true，则它将显示该元素，而如果它的计算结果为true，则[hidden]将隐藏该元素。

因此，在您的代码中，使用[hidden]="!showControl"而不是*ngIf语句。但是，我会更改类型记录代码和变量名，这样您就不必在HTML模板中否定它。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50956121

复制

相似问题

问Angular6 -引用隐藏元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular6 -引用隐藏元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular6 -引用隐藏元素
EN