Так что я использую AngularJS (front-end) и .NET Core (back-end) для моего личного веб-проекта разработчика (веб-сайт продавца музыкальных инструментов). У меня есть модель под названием «Гитара», и у меня есть все данные о гитаре внутри таблицы «Гитара» в БД, и у каждого из них есть основное изображение. Внутри файла .ts я ввел массив гитар, который в настоящее время хранит 5 данных (гитары). Индекс 0, 1, 2 - гитары Martin, а 3, 4 - гитары Gibson. Я разделил гитару Мартина и Гибсона на отдельные компоненты в Angular, поэтому у каждого из них есть своя страница и URL. И у меня также есть компонент карты гитары для стилизации изображения с использованием карты начальной загрузки. Ниже показано, как я использовал оператор условия angular для фильтрации гитар Gibson и их отображения только.
<div *ngIf="guitar.brand == 'Gibson'">
<app-guitar-card [guitar]="guitar"></app-guitar-card>
</div>
он занимает пространство изображения для индексов 0, 1, 2 и начинает отображать 3-е индексное изображение с 4-й позиции, которая находится справа. Но я хочу, чтобы эти первые 3 изображения не занимали места, даже если они не отображаются на веб-странице.
Нажмите здесь, чтобы увидеть скриншот моей проблемы
Это 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, но не смог понять это. Пожалуйста помоги. Спасибо!