html - 当使用 if 语句过滤前 3 个图像时，如何在从左侧开始的数组中显示(即)第 3 个索引(第 4 个)图像？

Question

所以我在我的个人 Web 开发元素(乐器零售商网站)中使用 AngularJS(前端)和 .NET Core(后端)。我有一个名为“吉他”的模型，我在数据库的吉他表中拥有所有吉他数据，每个数据都有一个主图像。在 .ts 文件中，我引入了一组吉他，这些吉他目前正在存储 5 个数据(吉他)。索引 0、1、2 是 Martin 吉他，3、4 是 Gibson 吉他。我在 Angular 中将 Martin 和 Gibson 吉他分离成单独的组件，因此它们每个都有自己的页面和 URL。我还有吉他卡组件，用于使用 Bootstrap 卡对图像进行样式设置。下面是我如何使用 angular 的条件语句来过滤 Gibson 吉他并仅显示它们。

<div *ngIf="guitar.brand == 'Gibson'">
  <app-guitar-card [guitar]="guitar"></app-guitar-card>
</div>

它占用索引 0、1、2 的图像空间，并从右侧的第 4 个位置开始显示第 3 个索引图像。但我希望那些前 3 张图片在甚至没有显示在网页上时也不会占用空间。 Click here to see the screenshot of my issue

这是 gibson-list.component.html

<div class="container mt-5">
  <div class="row">
    <div *ngFor="let guitar of guitars" class="left col-lg-3 col-md-6 col-sm-12">
      <div *ngIf="guitar.brand == 'Gibson'">
        <app-guitar-card [guitar]="guitar"></app-guitar-card>
      </div>
    </div>
  </div>
</div>

这是 gibson-list.component.ts

export class GibsonListComponent implements OnInit {
  guitars: Guitar[];

  constructor(private guitarService: GuitarService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.loadGuitars();
  }

  loadGuitars() {
    this.guitarService.getGuitars().subscribe((guitars: Guitar[]) => {
      this.guitars = guitars;
    }, error => {
      this.alertify.error(error);
    });
  }
}

我尝试使用 css 解决这个问题，但无法解决。请帮忙。谢谢!

Answer 1

那是因为div是通过*ngFor添加的，空内容导致*ngIf。试试这个:

ts文件

filter(guitars,brand){
  return guitars.filter(g=>g.brand===brand)
}

html文件

<div *ngFor="let guitar of filter(guitars,'Gibson')" class="left col-lg-3 col-md-6 col-sm-12">

---