作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
到目前为止,我还没有找到任何代码片段,而且文档太简洁了。所以我的问题是如何将参数传递给 ng-template 以及如何取回索引?直觉上下面应该工作,但它只是抛出“未定义”。感谢您的帮助。
@ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef;
@ViewChild("tpl") tpl: TemplateRef<any>;
ngAfterViewInit() {
this.vc.createEmbeddedView(this.tpl,
new Book("The Complete Guide to Angular 4", 55));
this.vc.createEmbeddedView(this.tpl,
new Book("Building Web Components with TypeScript and Angular 4", 48));
}
deleteBook(index) {
console.log("deleteBook index ", index);
}
<div class="container">
<div class="card-deck">
<ng-container #vc></ng-container>
</div>
<ng-template #tpl let-book="book" let-index="index">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Title: {{book.title}}</h4>
<p class="card-text">Price: {{book.price}}</p>
<button type="button" class="btn btn-primary" (click)="deleteBook(index)">Delete</button>
</div>
</div>
</ng-template>
</div>
最佳答案
您需要传递一个对象,其键与 let-keyname
语法匹配:
<ng-template #tpl let-book="book" let-index="index">
...
this.vc.createEmbeddedView(this.tpl, {
book: new Book("The Complete Guide to Angular 4", 55),
index: someIndex
});
关于angular - 如何将上下文对象传递给使用 ng-template 创建的嵌入式 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45469657/
我是一名优秀的程序员,十分优秀!