How to filter a class in Angular?-CodePudding

I'm trying to show in a list the projects whose method "arduino" is equal to true (it's a boolean).

I tried to do *ngFor and *ngIf on the same line but it gives an error, so when doing it on another line, the system loads the projects whose method "arduino" is equal to 'false' too, so it doesn't work well

How can I filter it from component.ts so that only projects with method project.arduino = true are loaded?

Here is the code in 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)
      }
    )
  }

And here is the relevant code in component.html

<div >
        <ul>
            <li *ngFor="let project of projects" >
              <ng-container *ngIf="project.arduino == true"> ************ Here i filtered it in that way
                    <a [routerLink]="['/project', project._id]">
            
                    <div >
                        <div >
                        <img src="{{ url 'get-image/' project.imagefront }}" *ngIf="project.imagefront" />
                        </div>
                    </div>
                  </a>
              </ng-container>
            </li>
        </ul>
      </div>

In this way it is loading the projects whose project.arduino = false, it does not show them on the screen but it messes up the list in the browser

I'm using Angular 13

Thank you very much!

CodePudding user response：

You can move the *ngFor to the <ng-container> instead of the *ngIf. Then move the *ngIf to <li> tag. To make sure only those <li> are in DOM which the condition as true.

<div >
  <ul>
    <ng-container *ngFor="let project of projects">
      <li *ngIf="project.arduino == true" >
        <a [routerLink]="['/project', project._id]">
          <div >
            <div >
              <img src="{{ url 'get-image/' project.imagefront }}" *ngIf="project.imagefront" />
            </div>
          </div>
        </a>
      </li>
    </ng-container>
  </ul>
</div>

CodePudding user response：

I think if the method "arduino" is a boolean you only need to do something like :

<ng-container *ngIf="this.project.arduino">

In your TypeScript try to add the adruino projects who are true to a new list:

this.newList = [];
if (this.project.arduino) {
this.newList.push(project)
}

Than you can only use the <li *ngFor="let project of newList" > and get rid off the condition <ng-container *ngIf="project.arduino == true">