Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Убунту

как можно реализовать карусель решений primeng в Angular [закрыто]

На чтение 13 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. 1. Основные компоненты Angular и PrimeNG
  4. 2. Настройка Карусели
  5. 3. Логика Управления Датами
  6. 4. Управление переходами в Карусели
  7. 5. Проверка Начальных Значений
  8. Заключение

Вопрос или проблема

<meta [name]=”pressDescription?.meta_title” [content]=”pressDescription?.meta_description” charset=”UTF-8″>
<app-navbar [isSideBar]=”isSideBar” (sideBarClick)=”backBtn()” [showNavLogo]=”true” [isEdit]=”isEdit”
(backbtn)=”backBtn()”>

Еженедельные новости

Выбрать дату

@for(press of currentPressData; track $index){

}

@if(!isLoading){

}

// это ts файл angular
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Renderer2,
} from ‘@angular/core’;
import { HomePageServiceService } from ‘../../../service/home-page-service.service’;
import { NgxSpinnerService } from ‘ngx-spinner’;
import { environment } from ‘../../../../environments/environment.development’;
import { NavbarComponent } from ‘../../shared/navbar/navbar.component’;
import { Layout4Component } from ‘../../common/Layouts/layout4-P/layout4.component’;
import { Layout21Component } from ‘../../common/Layouts/layout21/layout21.component’;
import { FooterComponent } from ‘../../shared/footer/footer.component’;
import { Layout27Component } from ‘../../common/Layouts/layout27/layout27.component’;
import { Meta } from ‘@angular/platform-browser’;
import { Layout33Component } from ‘../../common/Layouts/layout33/layout33.component’;
import { CommonModule } from ‘@angular/common’;
import { CarouselModule } from ‘primeng/carousel’;
import { MatInputModule } from ‘@angular/material/input’;
import { MatFormFieldModule } from ‘@angular/material/form-field’;
import {
MatDatepickerInputEvent,
MatDatepickerModule,
} from ‘@angular/material/datepicker’;
import { DateAdapter, provideNativeDateAdapter } from ‘@angular/material/core’;
import { CustomDateAdapter } from ‘./custom-date-adapter’;

@Component({
selector: ‘app-press’,
standalone: true,
templateUrl: ‘./press.component.html’,
providers: [
provideNativeDateAdapter(),
{ provide: DateAdapter, useClass: CustomDateAdapter },
],
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrl: ‘./press.component.css’,
imports: [
NavbarComponent,
Layout4Component,
Layout21Component,
FooterComponent,
Layout27Component,
Layout33Component,
CommonModule,
CarouselModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule,
],
})
export class PressComponent {
imageUrl = environment.image_url_server;
pressLayouts!: any;
isSideBar: boolean = false;
isEdit: boolean = true; //Режим
isLoading = true;
others: any;
pressDescription: any;
maxDate: Date;
minDate: Date;
selectedDate: Date | any = null;
currentPressData: any;
filteredPressData: any[] = [];
activeIndex = 0;
constructor(
private homeservice: HomePageServiceService,
private loader: NgxSpinnerService,
private renderer: Renderer2,
private metaService: Meta,
private cdr: ChangeDetectorRef
) {
this.minDate = new Date(2024, 8, 23); // 23-09-2024 (Месяц начинается с 0)
this.maxDate = new Date(2024, 9, 27); // 27-10-2024 (Месяц начинается с 0)
}

ngOnInit(): void {
this.loader.show();
this.homeservice.getPress().subscribe(
(data) => {
const pressData = data.data;
const worker = new Worker(
new URL(‘../../../press.worker’, import.meta.url)
);

    worker.onmessage = ({ data: processedData }) => {
      this.pressLayouts = processedData || [];
      this.filteredPressData = this.pressLayouts;
      this.currentPressData =
        this.filteredPressData.length > 0
          ? this.filteredPressData[0].data11
          : [];
      this.isLoading = false;
      this.loader.hide();
      this.cdr.detectChanges();
    };

    worker.onerror = (error) => {
      console.error('Ошибка рабочего потока:', error);
      this.loader.hide();
    };
    worker.postMessage(pressData);
  },
  (error) => {
    console.error('Ошибка при получении данных прессы:', error);
    this.loader.hide();
  }
);

this.homeservice.getMoreProjects('', 'press').subscribe((data) => {
  this.others = data.data[0];
});
this.homeservice
  .getMetatagData('practice-updates')
  .subscribe((response) => {
    this.pressDescription = response?.data[0];
    this.metaService.addTag({
      name: this.pressDescription?.meta_title,
      content: this.pressDescription?.meta_description,
      charset: 'UTF-8',
    });
  });

}

updateFilteredPressData() {
if (this.selectedDate) {
const selectedDate = new Date(this.selectedDate);
selectedDate.setHours(0, 0, 0, 0);

  const selectedDateData: any[] = [];
  const futureData: any[] = [];
  const pastData: any[] = [];

  this.pressLayouts.forEach((layout: any) => {
    const fromDate = new Date(
      layout.from_dt.split('-').reverse().join('-')
    );
    const toDate = new Date(layout.to_dt.split('-').reverse().join('-'));
    fromDate.setHours(0, 0, 0, 0);
    toDate.setHours(0, 0, 0, 0);

    if (selectedDate >= fromDate && selectedDate <= toDate) {
      selectedDateData.push(layout);
    } else if (selectedDate < fromDate) {
      futureData.push(layout);
    } else {
      pastData.push(layout);
    }
  });

  futureData.sort((a: any, b: any) => {
    const dateA = new Date(
      a.from_dt.split('-').reverse().join('-')
    ).getTime();
    const dateB = new Date(
      b.from_dt.split('-').reverse().join('-')
    ).getTime();
    return dateA - dateB;
  });

  pastData.sort((a: any, b: any) => {
    const dateA = new Date(
      a.from_dt.split('-').reverse().join('-')
    ).getTime();
    const dateB = new Date(
      b.from_dt.split('-').reverse().join('-')
    ).getTime();
    return dateB - dateA;
  });

  this.filteredPressData = [
    ...selectedDateData,
    ...futureData,
    ...pastData,
  ];
  this.activeIndex = 0;
  console.log('Отфильтрованные данные:', this.filteredPressData);

  this.currentPressData =
    this.filteredPressData.length > 0
      ? this.filteredPressData[0].data11 || []
      : [];
  this.cdr.detectChanges();
} else {
  this.filteredPressData = this.pressLayouts;
  this.currentPressData =
    this.filteredPressData.length > 0
      ? this.filteredPressData[0].data11 || []
      : [];
}

}

updateCurrentPressData(index: any) {
if (this.filteredPressData[index.page]) {
this.selectedDate = null;
this.currentPressData = this.filteredPressData[index.page].data11 || [];
this.cdr.detectChanges();
} else {
this.currentPressData = [];
}
}

onDateChange(event: MatDatepickerInputEvent) {
if (event.value) {
this.selectedDate = event.value;
this.updateFilteredPressData();
this.cdr.detectChanges();
} else {
this.selectedDate = null;
this.filteredPressData = this.pressLayouts;
this.currentPressData =
this.filteredPressData.length > 0
? this.filteredPressData[0].data11 || []
: [];
}
}

toTop() {
window.scrollTo({ top: 0, behavior: ‘smooth’ });
}

backBtn() {
this.isSideBar = !this.isSideBar;
if (this.isSideBar) {
this.renderer.setStyle(
document.getElementById(‘body’),
‘overflow’,
‘hidden’
);
} else {
this.renderer.setStyle(
document.getElementById(‘body’),
‘overflow’,
‘visible’
);
}
}
}

press.worker.ts файл

self.onmessage = (event) => {
const pressData = event.data;

const maxPressIdItem = pressData.reduce((max:any, item:any) => {
return (item.press_id > max.press_id) ? item : max;
}, pressData[0]);

const remainingItems = pressData.filter((item:any) => item.press_id !== maxPressIdItem.press_id);

const processedData = [maxPressIdItem, …remainingItems];
console.log(“processedData”,processedData);

self.postMessage(processedData);
};

и это мой json

{
“data”: [
{
“press_id”: “1”,
“data11”: [
{
“news_id”: “9”,
“image”: “/HCP_Website/CMS/page_Press/Image/26_327028192291471811.jpg”,
“title”: “Развитие зоны парковки лодок в Даман”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “8”,
“image”: “/HCP_Website/CMS/page_Press/Image/21_175883836182750584.jpg”,
“title”: “Посещение парка на набережной в Даффнале”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “6”,
“image”: “/HCP_Website/CMS/page_Press/Image/28_229443956196988068.jpg”,
“title”: “Посещение парламента для членов PEATA”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “5”,
“image”: “/HCP_Website/CMS/page_Press/Image/18_21729230120105409.jpg”,
“title”: “Обсуждение с Саши Верма”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “4”,
“image”: “/HCP_Website/CMS/page_Press/Image/25_303650363300932730.jpg”,
“title”: “Участок реки Тапи 01”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “7”,
“image”: “/HCP_Website/CMS/page_Press/Image/27_180519490275756007.jpg”,
“title”: “Корпоративный дом Саумйи”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “3”,
“image”: “/HCP_Website/CMS/page_Press/Image/24_174805488297466704.jpg”,
“title”: “Гаушала и Удйог Мандир в Ашраме Ганди”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “2”,
“image”: “/HCP_Website/CMS/page_Press/Image/23_16815458389224250.jpg”,
“title”: “Этап 2 SRFD – Строительство набережной”,
“description”: “”,
“layout”: “0”
}
],
“cover_image”: “/HCP_Website/CMS/page_Press/Image/23_29_8524647402534314.jpg”,
“from_dt”: “23-09-2024”,
“to_dt”: “29-09-2024”
},
{
“press_id”: “2”,
“data11”: [
{
“news_id”: “11”,
“image”: “/HCP_Website/CMS/page_Press/Image/21_7878627309344664.jpg”,
“title”: “Ашрам Ганди – Визит для оценки площадки”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “12”,
“image”: “/HCP_Website/CMS/page_Press/Image/27_0886059029498614.jpg”,
“title”: “Ашрам Битлз, Ришикеш”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “13”,
“image”: “/HCP_Website/CMS/page_Press/Image/28_9735554911964758.jpg”,
“title”: “AmulFed Dairy II, Раджкот”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “14”,
“image”: “/HCP_Website/CMS/page_Press/Image/23_2467689735481777.jpg”,
“title”: “Расширение корпоративного офиса B-Safal, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “15”,
“image”: “/HCP_Website/CMS/page_Press/Image/24_3827789726285372.jpg”,
“title”: “Концептуальный срез лесного променад для SRFDCL”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “16”,
“image”: “/HCP_Website/CMS/page_Press/Image/26_7750592959981658.jpg”,
“title”: “Штаб-квартира IFSCA, GIFT City”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “17”,
“image”: “/HCP_Website/CMS/page_Press/Image/25_7750592959981658.jpg”,
“title”: “Жилищное строительство EWS, Сананд”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “18”,
“image”: “/HCP_Website/CMS/page_Press/Image/18_0272576538610075.jpg”,
“title”: “Клуб и виллы Крупал Ананд, Ахмедабад”,
“description”: “”,
“layout”: “0”
}
],
“cover_image”: “/HCP_Website/CMS/page_Press/Image/22_9252375416640387.jpg”,
“from_dt”: “30-09-2024”,
“to_dt”: “06-10-2024”
},
{
“press_id”: “3”,
“data11”: [
{
“news_id”: “20”,
“image”: “/HCP_Website/CMS/page_Press/Image/1.jpg”,
“title”: “Обновление рек Павана и Индрайани, Пимпри-Чинчвад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “21”,
“image”: “/HCP_Website/CMS/page_Press/Image/2.jpg”,
“title”: “Клуб и виллы Крупал Ананд, Ахмедабад “,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “22”,
“image”: “/HCP_Website/CMS/page_Press/Image/3.jpg”,
“title”: “Разработка набережной реки Тапи и проект восстановления, Сурата”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “23”,
“image”: “/HCP_Website/CMS/page_Press/Image/5.jpg”,
“title”: “Национальный познавательный проект берега реки Сабармати, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “24”,
“image”: “/HCP_Website/CMS/page_Press/Image/4_7148899920365242.jpg”,
“title”: “Национальный познавательный проект берега реки Сабармати, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “25”,
“image”: “/HCP_Website/CMS/page_Press/Image/6.jpg”,
“title”: “Расширение банка AMCO, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “26”,
“image”: “/HCP_Website/CMS/page_Press/Image/7_0784784275974691.jpg”,
“title”: “Мастер-план Ашрама Ганди, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “27”,
“image”: “/HCP_Website/CMS/page_Press/Image/8.jpg”,
“title”: “Мост Аполло, Гандхинегар”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “28”,
“image”: “/HCP_Website/CMS/page_Press/Image/9_4287287581465610.jpg”,
“title”: “Разработка набережной Кханвел, Дадра и Нагар Хавели”,
“description”: “”,
“layout”: “0”
}
],
“cover_image”: “/HCP_Website/CMS/page_Press/Image/22_9719651855870003.jpg”,
“from_dt”: “07-10-2024”,
“to_dt”: “13-10-2024”
},
{
“press_id”: “4”,
“data11”: [
{
“news_id”: “32”,
“image”: “/HCP_Website/CMS/page_Press/Image/32.jpg”,
“title”: “Корпоративный дом Jay Chemical, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “33”,
“image”: “/HCP_Website/CMS/page_Press/Image/33.jpg”,
“title”: “Бунгало Нинад, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “34”,
“image”: “/HCP_Website/CMS/page_Press/Image/34.jpg”,
“title”: “Штаб-квартира IFSCA, GIFT City”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “35”,
“image”: “/HCP_Website/CMS/page_Press/Image/35.jpg”,
“title”: “Дизайн улицы AMC – от Нана Чилоды до Круга Санатал”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “36”,
“image”: “/HCP_Website/CMS/page_Press/Image/36.jpg”,
“title”: “Клуб и виллы Крупал Ананд, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “37”,
“image”: “/HCP_Website/CMS/page_Press/Image/37.jpg”,
“title”: “Развитие озера Нерсинха Мехты, Джунагадх”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “38”,
“image”: “/HCP_Website/CMS/page_Press/Image/38.jpg”,
“title”: “Аудитория, Катавада”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “39”,
“image”: “/HCP_Website/CMS/page_Press/Image/39.jpg”,
“title”: “Учебное здание ANU, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “40”,
“image”: “/HCP_Website/CMS/page_Press/Image/40.jpg”,
“title”: “Расширение банка AMCO, Ахмедабад”,
“description”: “”,
“layout”: “0”
}
],
“cover_image”: “/HCP_Website/CMS/page_Press/Image/31.jpg”,
“from_dt”: “14-10-2024”,
“to_dt”: “20-10-2024”
},
{
“press_id”: “5”,
“data11”: [
{
“news_id”: “43”,
“image”: “/HCP_Website/CMS/page_Press/Image/43_1947710417459452.jpg”,
“title”: “Ашрам Битлз, Ришикеш”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “44”,
“image”: “/HCP_Website/CMS/page_Press/Image/44_7680215890040850.jpg”,
“title”: “Конкурс зеленого дизайна IGBC 2024”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “45”,
“image”: “/HCP_Website/CMS/page_Press/Image/45_6569523544361089.jpg”,
“title”: “Расширение зала Ньюмена, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “46”,
“image”: “/HCP_Website/CMS/page_Press/Image/46_1985668362987226.jpg”,
“title”: “Концептуальная стратегия ландшафта для набережной, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “47”,
“image”: “/HCP_Website/CMS/page_Press/Image/47_1048635375388117.jpg”,
“title”: “Развитие земли Amochhu и проект городка, Бутан”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “48”,
“image”: “/HCP_Website/CMS/page_Press/Image/48_6519450835069958.jpg”,
“title”: “Студенческое общежитие AES, Ахмедабад”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “49”,
“image”: “/HCP_Website/CMS/page_Press/Image/49_3047613071335239.jpg”,
“title”: “Развитие пляжа Джампоре (расширение), Даман”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “50”,
“image”: “/HCP_Website/CMS/page_Press/Image/50_0847899101238267.jpg”,
“title”: “Пляж Девка – Развитие остаточных пространств, Даман”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “51”,
“image”: “/HCP_Website/CMS/page_Press/Image/51_1761788309416642.jpg”,
“title”: “Анализ сетей водоснабжения для Ахмедабада”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “52”,
“image”: “/HCP_Website/CMS/page_Press/Image/52_5467592599154789.jpg”,
“title”: “Конференция BIM от группы Nemetschek India”,
“description”: “”,
“layout”: “0”
},
{
“news_id”: “53”,
“image”: “/HCP_Website/CMS/page_Press/Image/53.jpg”,
“title”: “Пожелания с Дивали”,
“description”: “”,
“layout”: “0”
}
],
“cover_image”: “/HCP_Website/CMS/page_Press/Image/41.jpg”,
“from_dt”: “21-10-2024”,
“to_dt”: “27-10-2024”
}
]
}

Когда я впервые посещаю страницу прессы и сразу выбираю дату, данные устанавливаются правильно, но когда я посещаю страницу и щелкаю по кнопке слайдера и перехожу назад или вперед, а затем выбираю дату, данные устанавливаются неправильно.

Например, я выбираю дату от from_dt до to_dt между датами 30-09-2024, тогда эта дата приходит первой, и данные устанавливаются на эту дату, на следующую неделю, даты 07-10-2024 до 13-10-2024, 14-10-2024 до 20-10-2024, 21-10-2024 до 27-10-2024, и последние данные устанавливаются на 23-09-2024 до 29-09-2024. Это просто пример для понимания.

Так что, каковы решения карусели primeng в angular?

Ответ или решение

Для создания вращающегося карусели с использованием библиотеки PrimeNG в Angular, необходимо учесть как функциональные аспекты, так и элементы отображения данных. Ниже приведены рекомендации и шаги, которые помогут решить ваши проблемы с выбором даты и ее отображением в карусели.

1. Основные компоненты Angular и PrimeNG

PrimeNG предоставляет ряд удобных компонентов, включая компонент карусели. Убедитесь, что вы импортировали CarouselModule в вашем AppModule или в любом необходимом модуле.

import { CarouselModule } from 'primeng/carousel';

@NgModule({
  imports: [
    CarouselModule,
    // другие модули
  ]
})
export class AppModule {}

2. Настройка Карусели

Используйте следующий шаблон в вашем HTML файле, чтобы создать карусель:

<p-carousel [value]="filteredPressData" [numVisible]="3" [numScroll]="1" (onPage)="onPageChange($event)">
  <ng-template pTemplate="item" let-item>
    <div class="carousel-item">
      <img [src]="item.cover_image" alt="Пресса" />
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </div>
  </ng-template>
</p-carousel>

3. Логика Управления Датами

Для правильного фильтрации данных на основе выбранной даты и управления активными индексами в карусели, вам нужно убедиться, что методы обновления данных корректно работают в зависимости от текущего состояния:

updateFilteredPressData() {
  if (this.selectedDate) {
    // Логика отбора данных на основе выбранной даты
    this.filteredPressData = this.pressLayouts.filter(layout => {
      const fromDate = new Date(layout.from_dt);
      const toDate = new Date(layout.to_dt);
      return this.selectedDate >= fromDate && this.selectedDate <= toDate;
    });

    // Если вы переходите к предыдущему или следующему элементу карусели
    this.currentPressData = this.filteredPressData.length > 0 ? this.filteredPressData[0].data11 : [];
    this.activeIndex = 0;  // Сброс активного индекса
  } else {
    this.filteredPressData = this.pressLayouts;  // Сбрасываем фильтр
  }
}

4. Управление переходами в Карусели

При изменении даты или при переходе на предыдущее/следующее значение в карусели, вам необходимо обновить currentPressData так, чтобы оно соответствовало отображаемым элементам:

onDateChange(event: MatDatepickerInputEvent<Date>) {
  if (event.value) {
    this.selectedDate = event.value;
    this.updateFilteredPressData();
  } else {
    this.selectedDate = null;
    this.filteredPressData = this.pressLayouts;
    this.currentPressData = this.filteredPressData.length > 0 ? this.filteredPressData[0].data11 : [];
  }
}

onPageChange(event: any) {
  this.activeIndex = event.page;
  this.currentPressData = this.filteredPressData[this.activeIndex]?.data11 || [];
}

5. Проверка Начальных Значений

Убедитесь, что при инициализации компонента фильтры правильно выставлены, и основной массив данных загрузился корректно.

ngOnInit(): void {
  this.loader.show();
  this.homeservice.getPress().subscribe(data => {
    this.pressLayouts = data.data;
    this.filteredPressData = this.pressLayouts; // Задать начальные значения
    this.currentPressData = this.filteredPressData.length > 0 ? this.filteredPressData[0].data11 : [];
    this.isLoading = false;
    this.loader.hide();
  });
}

Заключение

Используя данные выше советы и рекомендации, вы сможете настроить карусель PrimeNG для оптимальной работы с фильтруемыми данными, что позволит корректно отображать элементы при выборе даты и при переходах по карусели. Регулярно тестируйте изменения, чтобы выявлять и устранять возможные проблемы на ранних этапах.

application-development keyboard-layout
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности