如何在 div 中渲染两个对象?

分享于2022年07月17日 angular javascript 问答
【问题标题】:如何在 div 中渲染两个对象?(How can I render two object in div?)
【发布时间】:2022-01-25 00:31:45
【问题描述】:

我有 2 个带有数据的对象,我需要在 html 中重构渲染。

这是我得到的:

How can I render two object in div?

但这是我需要获得的:

How can I render two object in div?

黑框是 articles 对象的 *ngFor ,分别红色的是 adsContainer 对象的 *ngFor


  public adsContainer: any = [
    { id: '1', value: 'text value here' },
    { id: '2', value: 'text value here' },
    { id: '3', value: 'text value here' }
  ]
  public articles: any = [
    { id: '1', title: 'title value here', content: 'content here' },
    { id: '2', title: 'title value here', content: 'content here' },
    { id: '3', title: 'title value here', content: 'content here' },
    ........
    { id: '20', title: 'title value here', content: 'content here' },
  ]

  • 你能至少发布你的目标代码吗?并解释一下你想要做什么?
  • 你能检查一下问题吗?
  • 谢谢分享。但是仍然无法弄清楚您要做什么。您发布的这些图片解释不够。

【解决方案1】:

您的问题是您循环添加广告容器

{{data.value}}

您想要的是一次只添加一个广告容器,为此,您必须移除循环

为了让这三个广告展示,您必须做一些数学运算以从文章索引中获取广告索引

类似这样的:

{{adsContainer[mathFloor(i / 7)].value}}

请注意 Math 在 Angular 模板中不可用,您必须将 floor 重新定义为组件方法

function mathFloor(val) {return Math.floor(val)}