Primeng 드롭다운을 위해 백엔드에서 데이터를 가져오는 방법

각도 또는 반응 또는 다른 프레임워크일 수 있는 선택한 프레임워크에 따라 primeng에서 구성 요소를 사용할 때. 오늘은 primeng 구성 요소를 사용하여 백엔드에서 데이터를 가져오는 방법에 대해 논의할 것입니다.
primeng 구성 요소 사용에 대해 알아야 할 사항은 다음 URL을 사용하여 문서로 이동해야 한다는 것입니다. www.primefaces.org/primeng/dropdown 이 링크는 드롭다운 구성 요소로 바로 연결됩니다.
그런 다음 다음 명령을 사용하여 응용 프로그램에 primeng을 설치합니다.

npm install primeng --save
npm install primeicons --save

성공적으로 설치되면 다음 가져오기를 볼 수 있습니다.

import {AccordionModule} from 'primeng/accordian';
import {MenuItem} from 'primeng/api';

이것은 모듈에서 가져오기 배열의 일부가 됩니다.
그런 다음 가져오기 배열에 다음 명령을 추가하여 primeng 드롭다운을 가져옵니다.

import {DropdownModule} from 'primeng/dropdown';

NB: 재질 U.I에서 primeng 및 기타 여러 구성 요소에 이르기까지 다양한 구성 요소를 사용해 왔다면 사용하는 모든 구성 요소가 구성 요소를 포함하는 모듈을 가져와야 한다는 것을 알게 될 것입니다.
효율성을 위해 빌드하는 동안 응용 프로그램의 크기를 최소화하고 응용 프로그램의 효율성을 높일 수 있습니다. 하나의 모듈에서 응용 프로그램에서 사용할 모든 구성 요소를 가져오고 원하는 곳에서 가져올 수 있도록 내보낼 수 있습니다. 응용 프로그램에서 사용할 수 있습니다.
빌드 시간이 짧을수록 애플리케이션이 더 빨라집니다.
빈 배열을 생성하고 초기화한 다음 백엔드에서 모든 데이터를 가져오는 함수를 포함하는 생성한 서비스에 가입합니다.
그런 다음 다음과 같은 primeng 코드 스니펫의 사용자 정의 코드를 포함할 템플릿으로 이동합니다.

<p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name"></p-dropdown>

여기서 options에는 백엔드에서 가져오는 모든 데이터를 포함하는 이름이 포함됩니다. 이 경우 모의 데이터를 사용하여 백엔드에서 동일한 원리로 작동하는 방식을 정확하게 설명합니다.
코드 스니펫에는 primeng 문서에서 가져온 모의 데이터가 포함되어 있습니다.

interface City {
    name: string,
    code: string
}

export class DropdownDemo {

    cities: City[];

    selectedCity: City;

    constructor() {
        this.cities = [
            {name: 'New York', code: 'NY'},
            {name: 'Rome', code: 'RM'},
            {name: 'London', code: 'LDN'},
            {name: 'Istanbul', code: 'IST'},
            {name: 'Paris', code: 'PRS'}
        ];
    }

}

이것은 모의 데이터이지만 최상위 코드 스니펫에서 초기화된 이름인 도시의 배열 이름이 있습니다. 이제 제공된 옵션의 이름 또는 코드일 수 있는 배열 옵션 중 하나를 필터링하고 선택할 수 있습니다. . "name"과 "code"라는 값이 할당된 두 요소 중 하나와 같을 수 있는 "optionLabel"을 사용합니다. "이름"요소를 사용하면 드롭다운에 '뉴욕', '로마', '런던', '이스탄불' 및 '파리' 값이 포함됩니다. 정확한 순서대로. optionLabel이 "code"와 같다고 선택하면 대신 'NY', 'RM', 'LDN', 'IST' 및 'PRS' 값이 표시됩니다. 정확한 순서대로.

결론적으로

동일한 방식으로 작동하는 라이브 백엔드로 작업할 때 이러한 프로세스를 쉽게 복제할 수 있습니다.
지금은 행복한 코딩입니다.