作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 ng-bootstrap 编写带有 Bootstrap 的 Angular 应用程序。我有一个封装在这样的组件中的弹出窗口:
HTML(弹出组件)
<div>
<div>Data 1: <i>{{ v.data1 }}</i></div>
<div>Data 2: <i>{{ v.data2 }}</i></div>
</div>
这个弹出窗口在另一个组件中打开:
HTML
<div *ngFor="let v of vector">
<span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
</div>
<ng-template #popOver>
<popover></popover>
</ng-template>
我需要将 ngFor 的 v 参数传递给弹出窗口。我怎样才能做到这一点?
最佳答案
这是 Angular 的基本技术 how to pass data to component .
所以你需要更新你的 popover 组件:
popover.component.html
<div>
<div>Data 1: <i>{{ data.data1 }}</i></div>
<div>Data 2: <i>{{ data.data2 }}</i></div>
</div>
popover.component.ts
@Component({
selector: 'popover',
templateUrl: './popover.component.html'
})
export class PopoverComponent {
@Input() data: any;
}
然后更新你的 ngFor:
<div *ngFor="let v of vector">
<span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
<ng-template #popOver>
<popover [data]="v"></popover>
</ng-template>
</div>
关于angular - 如何将数据传递给 ng-bootstrap popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49149662/
我是一名优秀的程序员,十分优秀!