Question

按照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>

这就是我得到的：

When i click on the 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() {

  }

}

Answer 1

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

<p-dropdown *ngIf="!!languages" [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>

Angular7 / PrimeNG下拉菜单不显示任何内容

1 个答案: