Question

我在angular5应用程序中使用PrimeNG。我有p-dropdown问题

问题

我有显示国家的p-drop。我正确地绑定了选择选项，它工作得很好（这些数据来自api），但是我需要为这个p-dropdown设置默认选择选项＆＃34; India＆＃34;。

我将ng-model值设置为印度，但它没有用。

我的dummy.component.html代码

<div class="form-group col-md-2">
    <div>
        <label for="inputEmail4"> Select Country</label>
        <span style="color:red">*</span>
    </div>
    <p-dropdown name="country" [options]="countries" [(ngModel)]="applicant.country" placeholder="select country"
        (onChange)="getStatebyCountry(applicant.country,$event)" #country="ngModel" required>
    </p-dropdown>
    <span *ngIf="country.invalid && (country.dirty || country.touched)">
        <span [hidden]="!country.hasError('required')" style="color:#ffa500">country is mandatory</span>
    </span>
</div>

我的dummy.component.ts

export class dummyComponent implements OnInit {
    //variable declaration scope for all controller function
    applicant: any = {};
    country: string; constructor() {
    }
    ngOnInit() {
        this.applicant.country = 'India';
    } 
    this.countries = [];
// this.countries.push({ label: 'Select Country', value: '' });
//getallcountries
this.UserService.getallcountries().subscribe(result => {
    console.log("countries" + result);
    this.cnt = result;
    for (let i = 0; i <= this.cnt.length; i++) {
        if (this.cnt[i].id === 1) {
            this.countries.push({ label: this.cnt[i].name, value: this.cnt[i].id });
        }
    }
 });

Answer 1

尝试替换

this.applicant = {country: 'India'};

带

p-dropdown

修改

从API获取数据后显示<div *ngIf="dataLoaded"> <p-dropdown [options]="countries" [(ngModel)]="applicant.country"></p-dropdown> </div>。

Application

请参阅Plunker

Answer 2

如果PrimeNG不知道将“ selectedCountry”绑定到哪个字段，则可能导致这种情况。您用于下拉控件的“国家”模型具有更多的键和值属性。

就我而言，我必须明确地“告知”每个下拉字段值的属性为"value"。我为此使用了p-dropdown dataKey属性。

因此，在下拉控件中，我添加了以下内容：

<p-dropdown dataKey="value" ></p-dropdown>

您可以阅读更多here。

Answer 3

我使用此解决方案来解决

html：

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

ts：

    public country;
    public countries;
    ngOnInit() {
        this.applicant.country = 'India';
        this.getCountry().then(()=>{
          this.country = this.applicant.country
        })
    } 
    getCountry(){
      return new Promise( (resolve,reject) => {
        this.UserService.getallcountries().subscribe(result => {
          this.cnt.forEach(element => {
            this.countries.push({
              label: element.name,
              value: element.id
            });
          });
          resolve();
        }, error =>{
          reject();
        });
      })          
    }
    changeCountry(){
     this.country = this.applicant.country;
    }

它在Primeng 6.1.3上工作

Answer 4

您可以使用ngModel来设置默认值 PrimeNG Dropdown ，如下所示：

component.html：

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

component.ts：

selectedCity: string = 1; //Id value of the City to be selected

如果由于版本问题而无法修复，请尝试以下操作：

this.cities.value = this.selectedCity;

希望这对您有帮助...

Answer 5

我的解决方案是在设置表单字段（ngModel或formControl）之前将国家/地区加载到控制器中。还要保持相同类型的密钥。不要在表单控件中使用数字，在列表中不要使用字符串：

// first get the cities from the server
response.cities.forEach(city => {
                      this.dropdowns['cities'].push({ value: city.id, label: element.city }); });

// when setting the form
city_id: new FormControl(this.user.city_id)

在上面的代码中，this.user.city_id和city.id具有相同的类型号

Answer 6

在PrimgNg中更新

在Primeng中为下拉菜单设置默认值时，需要小心一点。

<p-dropdown name="country" [options]="countries" [(ngModel)]="country" placeholder="select country" (onChange)="changeCountry()"></p-dropdown>

country应该是number而不是字符串。

如果它是字符串，则可以键入。

country: Number("1");

希望有帮助。

Answer 7

我也遇到了这个问题，经过几分钟的调试，我发现导致此问题的一些常见原因可能是：

1）类型不匹配-下拉列表可以绑定到整数，[[ngModel）]属性可以是字符串。

例如：

<p-dropdown [options]="countries" [(ngModel)]="selectedCountry"></p-dropdown>

哪里

countries = [1,2,3]

和

selectedCountry = '1'

2）大写-小写-下拉列表可以绑定到小写的字符串，并且[[ngModel）]属性可以在大写字母或两者的组合上。 / p>

例如：

countries = ['United States', 'England', 'Bolivia']

和

selectedCountry = 'united states'

必须完全匹配才能正常工作，在这种情况下，'United States'

Answer 8

我也有类似的问题。我用html属性“ optionLabel”解决了这个问题。如果我们阅读PrimeNG文档，它的内容是这样的：当将任意对象而不是SelectItems用作选项时，选项的标签字段名称。

Official documentation

希望有帮助

Answer 9

更换方案，尝试使用：

[placeholder]="yourSelectedObject.Field"

Answer 10

您的“selectedCountry”必须具有您的国家/地区元素具有的所有键

如何为PrimeNG p-dropdown设置默认值

10 个答案: