如何过滤Angular中的class？

Question

我试图在列表中显示其方法“arduino”等于 true（它是一个布尔值）的项目。

我试图在同一行执行 *ngFor 和 *ngIf 但它给出了一个错误，所以当在另一行执行时，系统加载其方法“arduino”等于 'false' 的项目也是，所以效果不佳

如何从 component.ts 中过滤它，以便只加载方法 project.arduino = true 的项目？

这是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)
      }
    )
  }

这里是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>

以这种方式加载 project.arduino = false 的项目，它不会在屏幕上显示它们，但会弄乱浏览器中的列表

我正在使用 Angular 13

非常感谢！

Answer 1

我认为如果方法“arduino”是一个布尔值，你只需要做类似的事情：

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

在您的 TypeScript 中，尝试将符合条件的 adruino 项目添加到新列表中：

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

比你只能使用 <li *ngFor="let project of newList" class="project"> 并摆脱条件 <ng-container *ngIf="project.arduino == true">

Answer 2

您可以将 *ngFor 移动到 <ng-container> 而不是 *ngIf。然后将 *ngIf 移动到 <li> 标签。确保只有那些 <li> 在 DOM 中，条件为 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>

如何过滤Angular中的class？

How to filter a class in Angular?

html

javascript

pipe

typescript

angular