如何过滤Angular中的类？答案

【问题标题】：How to filter a class in Angular?如何过滤Angular中的类？
【发布时间】：2022-02-05 00:12:54
【问题描述】：

我正在尝试在列表中显示其方法“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

非常感谢！

【问题讨论】：

标签： javascript html angular typescript pipe

【解决方案1】：

您可以将*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>

【讨论】：

成功了！非常感谢你帮了我很多忙！

【解决方案2】：

我认为，如果“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">

【讨论】：

是的，您是对的，但这不是问题所在，非常感谢您！