Следуя инструкциям https://www.primefaces.org/primeng/#/dropdown Я пытаюсь сделать один, но параметры списка не отображаются.
Редактировать: Исправлено. Я понял это неправильно. Я думал, что мог бы получить языки от внешнего класса, чтобы повторно использовать компонент. Возможно, это возможно, но я все еще не знаю, как это сделать. Если бы кто-то мог помочь мне с этим, я был бы очень признателен.
Это мои занятия:
Idioma.ts
export interface Idiomas {
name: string;
code: string;
}
export class Idioma{
languages: Idiomas[];
selectedLanguage:Idiomas;//Selected language unused
constructor(){
this.languages=[
{name: 'Español', code: 'SPA'},
{name: 'Deutsch', code: 'GER'},
{name: 'български език', code: 'BUL'},
{name: 'Hrvatski', code: 'CRO'},
{name: 'Dansk', code: 'DEN'},
{name: 'Dlovenčina', code: 'SLK'},
{name: 'Slovenščina', code: 'SLN'},
{name: 'Eesti keel', code: 'STN'},
{name: 'Suomi', code: 'FIN'},
{name: 'Français', code: 'FRA'},
{name: 'Ελληνική γλώσσα', code: 'GRE'},
{name: 'Nedarlands', code: 'HOL'},
{name: 'Magyar', code: 'HUN'},
{name: 'English', code: 'ENG'},
{name: 'Italiano', code: 'ITA'},
{name: 'Latviešu valoda', code: 'LET'},
{name: 'Lietuvių kalba', code: 'LIT'},
{name: 'Polski', code: 'POL'},
{name: 'Portugués', code: 'POR'},
{name: 'Čeština', code: 'CHE'},
{name: 'Limba română', code: 'RUM'},
{name: 'Svenska', code: 'SWE'}
]
}
}
header.component.ts
import { Component, OnInit } from '@angular/core';
import {Idioma, Idiomas} from "../../classes/Idioma";//Idioma unused
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
languages:Idioma[];
selectedLanguage: Idioma;
constructor() {
}
ngOnInit() {
}
}
header.component.html
<p-dropdown [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>
И вот что я получаю:
Когда я нажимаю на выпадающий
Что я делаю не так?
Для ее решения изменилось следующее:
app.module.ts
import {FormsModule} from "@angular/forms";
Idiomas.ts
export interface Idiomas {
label: string;
code: string;
}
header.component.ts
import { Component, OnInit } from '@angular/core';
import {Idiomas} from "../../classes/Idiomas";
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
languages: Idiomas[];
selectedLanguage:Idiomas;
constructor(){
this.languages=[
{label: 'Español', code: 'SPA'},
{label: 'Deutsch', code: 'GER'},
{label: 'български език', code: 'BUL'},
{label: 'Hrvatski', code: 'CRO'},
{label: 'Dansk', code: 'DEN'},
{label: 'Dlovenčina', code: 'SLK'},
{label: 'Slovenščina', code: 'SLN'},
{label: 'Eesti keel', code: 'STN'},
{label: 'Suomi', code: 'FIN'},
{label: 'Français', code: 'FRA'},
{label: 'Ελληνική γλώσσα', code: 'GRE'},
{label: 'Nedarlands', code: 'HOL'},
{label: 'Magyar', code: 'HUN'},
{label: 'English', code: 'ENG'},
{label: 'Italiano', code: 'ITA'},
{label: 'Latviešu valoda', code: 'LET'},
{label: 'Lietuvių kalba', code: 'LIT'},
{label: 'Polski', code: 'POL'},
{label: 'Portugués', code: 'POR'},
{label: 'Čeština', code: 'CHE'},
{label: 'Limba română', code: 'RUM'},
{label: 'Svenska', code: 'SWE'}
]
}
ngOnInit() {
}
}