javascript - 如何动态添加选项卡到 Angular primeNg tabview 控件?

标签 javascript html angular

我浏览了已回答的问题,但没有看到合适的答案。

我正在使用 Angular2 primeNg 模块。

我有一个 tabView 需要动态添加选项卡列表,每个选项卡都包含自己的组件。哪些选项卡需要包含在基于我在运行时读取的配置文件中。

按照 primeng 示例,我了解如何使用硬编码或用于此目的的 ngFor 指令来完成此操作。

使用 *ngFor 指令,假设我已经从配置文件中加载了组件详细信息、类型或其他内容的列表,如何在运行时将它们添加到 tabView 中。

正确/推荐的方法是什么?

最佳答案

这是我迄今为止发现的最简单的方案:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <input type="radio" name="sel" value="0" (click)="update($event)"> first<br>
  <input type="radio" name="sel" value="1" (click)="update($event)"> second<br>
  <div *ngIf="selected===0">Selected first </div>
  <div *ngIf="selected===1">Selected second</div>
  `
})

关于javascript - 如何动态添加选项卡到 Angular primeNg tabview 控件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45178069/

相关文章:

javascript - Angular : Cannot read property 'on' of undefined

php - html 刷新基于 php 变量

javascript - 如何在向下滚动事件中更改输入文本的颜色

javascript - 使用 setInterval 和 clearInterval 通过 HTML 输入复选框启动和停止文件重新加载

javascript - 如何检测 cordova iOS WebView 导航事件

angular - 如何使用 typescript 在 angular2 应用程序中实现 AAD B2C 功能?

javascript - 正则表达式在 CKeditor 的 HTML 中查找 png-gif-jpg 图像链接

javascript - 向 Javascript 列表中的每个对象添加/删除属性的最简单方法?

javascript - 单击 float div 中的链接不起作用

javascript - ("#"+ items).append 不是函数