0
272
Views¿Cómo puedo renderizar dos objetos en div?
Tengo 2 objetos con datos y necesito reestructurar la representación en html.
Esto es lo que obtengo:
pero esto es lo que necesito obtener:
El recuadro negro es el *ngFor del objeto de articles , respectivamente el rojo es *ngFor del objeto adsContainer
<div *ngFor="let article of articles; let i = index;"> <mat-card class="card"> <div> <a class="title"> {{article.title}} </a> <a> <p>{{article.content}}</p> </a> </div> </mat-card> <div class="container" *ngIf="(i % 7) === 6"> <div *ngFor="let data of adsContainer"> <div> <h1>{{data.value}}</h1> </div> </div> </div> </div> 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' }, ]2 answers
Answer question0
Intente usar directamente la matriz, también cuando llame a adsContainer[(parseInt(i/6)-1)% adsContainer.length , siempre reiniciará el índice:
<div *ngFor="let article of articles; let i = index;"> <mat-card class="card"> <div> <a class="title"> {{article.title}} </a> <a> <p>{{article.content}}</p> </a> </div> </mat-card> <div class="container" *ngIf="(i % 7) === 6"> <div> <div> <h1>{{adsContainer[(parseInt(i / 6)-1)%adsContainer.length].value}}</h1> </div> </div> </div> </div>0
Su problema es que agrega sus contenedores de anuncios en un bucle
<div class="container" *ngIf="(i % 7) === 6"> <!-- this loop here --> <div *ngFor="let data of adsContainer"> <div> <h1>{{data.value}}</h1> </div> </div> </div>lo que quiere es agregar solo un contenedor de anuncios a la vez, para hacer eso, debe mover el ciclo
Para que se muestren los tres anuncios, tendrá que hacer algunos cálculos para obtener el índice de anuncios del índice de artículos.
algo como esto :
<div class="container" *ngIf="(i % 7) === 6"> <div> <h1>{{adsContainer[mathFloor(i / 7)].value}}</h1> </div> </div> tenga en cuenta que Math no está disponible en plantillas angulares, tendrá que redefinir el piso como un método de componente
function mathFloor(val) {return Math.floor(val)}