angular ngFor调用javascript
angular ngFor调用javascript
提问于 2018-09-10 12:53:17
我有这样的HTML代码
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" *ngFor="let product of products; let i=index;">
<div class="owl-item">
<carouselFixture [stream]="product.stream" *ngIf="product.viewModelType == 'ProductSummary'" ></carouselFixture>
</div>
</div>
</div>
这工作得很好。我面临的问题是，当新产品立即添加时，它必须显示在owl carousel中……实际上，它正在加载，但错误，如下图所示
为了解决这个问题，我们需要在ngFor中调用下面的add函数
$('#add').on('click', function () {
var html = '<div class=\"item\"><carouselFixture
[stream]="product.stream" *ngIf="product.viewModelType ==
'ProductSummary'" ></carouselFixture></div>';
console.log(html);
owl.trigger('add.owl.carousel', [html, 0])
.trigger('refresh.owl.carousel');
});谁能告诉我如何调用这个'add‘函数...
回答 1
Stack Overflow用户
发布于 2018-09-15 04:01:11
AngularDart不允许像那样使用纯html将动态组件添加到页面。这是出于安全和性能方面的原因。它实际上不会在运行时将完整的角度引擎放在页面中。
它确实有其他方法来做到这一点。最简单的方法是将另一个条目添加到列表中，它将显示在for循环中。
另一种可能是使用ComponentFactory将其添加到页面https://webdev.dartlang.org/api/angular/angular/ComponentFactory-class中
我不确定owl在它的调用中到底做了什么，但是你可以添加不带angular组件的html，并在owl完成它的工作后使用组件工厂将它插入到正确的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52251287
复制相关文章
相似问题
腾讯云开发者
