0

按照https://www.primefaces.org/primeng/#/dropdown的说明，我正在尝试做一个，但未显示列表选项。

编辑：它是固定的。我理解错了。我认为我可以从外部类中获取语言以重用组件。可能有可能，但这是我仍然不知道该怎么做的事情。如果有人可以帮助我，我将不胜感激。

这些是我的课：

习语.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";

惯用语.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() {

  }

}
4

1 回答 1

1

它应该与 optionLabel="name" 一起使用。我正在以这种方式使用它。您在控制台中没有任何错误？也许在您的真实代码中，您正在异步获取您的选项，您必须等待它准备好？

<p-dropdown *ngIf="!!languages" [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>
于 2019-01-07T13:17:46.850 回答