Estoy tratando de mostrar en una lista los proyectos cuyo método "arduino" es igual a verdadero (es un booleano).
Intenté hacer *ngFor y *ngIf en la misma línea pero da error, así que al hacerlo en otra línea el sistema carga los proyectos cuyo método "arduino" es igual a 'falso' también, así que no trabajar bien
¿Cómo puedo filtrarlo desde component.ts para que solo se carguen los proyectos con el método project.arduino = true?
Aquí está el código en component.ts
@Component({ selector: 'app-arduino-projects', templateUrl: './arduino-projects.component.html', styleUrls: ['./arduino-projects.component.css'], providers: [ProjectService] }) export class ArduinoProjectsComponent implements OnInit { public projects: Project[]; public url: string; constructor( private _projectService: ProjectService ) { this.projects = []; this.url = Global.url; } ngOnInit(): void { this.getProjects(); } getProjects(){ this._projectService.getProjects().subscribe( response => { if(response.projects){ this.projects = response.projects; **************** this is the property that I have to filter and I don't know how to do it } }, error => { console.log(error) } ) }Y aquí está el código relevante en component.html
<div class="project-list"> <ul> <li *ngFor="let project of projects" class="project"> <ng-container *ngIf="project.arduino == true"> ************ Here i filtered it in that way <a [routerLink]="['/project', project._id]"> <div class="image-box"> <div class="image"> <img src="{{ url+'get-image/'+project.imagefront }}" *ngIf="project.imagefront" /> </div> </div> </a> </ng-container> </li> </ul> </div>De esta forma va cargando los proyectos cuyo project.arduino = false, no los muestra en pantalla pero desordena la lista en el navegador
estoy usando angular 13
¡Muchos gracias!
Puede mover *ngFor al <ng-container> en lugar de *ngIf . Luego mueva la *ngIf a <li> . Para asegurarse de que solo aquellos <li> estén en DOM cuya condición sea true .
<div class="project-list"> <ul> <ng-container *ngFor="let project of projects"> <li *ngIf="project.arduino == true" class="project"> <a [routerLink]="['/project', project._id]"> <div class="image-box"> <div class="image"> <img src="{{ url+'get-image/'+project.imagefront }}" *ngIf="project.imagefront" /> </div> </div> </a> </li> </ng-container> </ul> </div>Creo que si el método "arduino" es booleano, solo necesitas hacer algo como:
<ng-container *ngIf="this.project.arduino">En su TypeScript intente agregar los proyectos adruino que son fieles a una nueva lista:
this.newList = []; if (this.project.arduino) { this.newList.push(project) } Entonces solo puede usar <li *ngFor="let project of newList" class="project"> y deshacerse de la condición <ng-container *ngIf="project.arduino == true">